no-use-event-handler-attr

イベントハンドラ属性を指定すると警告します。

❌ 間違ったコード例

<div onclick="() => doSomething()">Click</div>

✅ 正しいコード例

<div id="foo">Click</div>

<script>
  document.getElementById('foo').addEventListener('click', () => doSomething());
</script>

詳細

設定値

型: boolean | string[]

• true（デフォルト）: すべてのイベントハンドラ属性を禁止します。
• string[]: 指定したイベントのみ禁止します。リストにないイベントハンドラは許可されます。イベント名は on プレフィックスなしの小文字で指定します（例: "onclick" ではなく "click"）。正規表現パターン（例: /^mouse/）も使用できます。

{
  "rules": {
    "no-use-event-handler-attr": true
  }
}

特定のイベントのみ禁止する場合:

{
  "rules": {
    "no-use-event-handler-attr": ["click"]
  }
}

{
  "rules": {
    "no-use-event-handler-attr": ["click", "mousedown"]
  }
}

正規表現パターンを使用する場合:

{
  "rules": {
    "no-use-event-handler-attr": ["/^mouse/"]
  }
}

ignore オプション

ignore オプションは属性名（on プレフィックス付き、例: "onclick"）で特定の属性を除外します。value より先に評価されます。文字列および正規表現パターンを受け付けます。

{
  "rules": {
    "no-use-event-handler-attr": {
      "value": ["click", "mousedown"],
      "options": {
        "ignore": "onclick"
      }
    }
  }
}

上記の例では onclick が ignore で除外されるため、onmousedown のみ報告されます。

Interface

{
  "no-use-event-handler-attr": boolean | string[]
}

trueですべてのイベントハンドラ属性を禁止、またはイベント名の配列（onプレフィックスなし）で選択的に禁止します。

Options

{
  "no-use-event-handler-attr": {
    "options": {
      "ignore"?: string | string[]
    }
  }
}

Property	Type	Default Value	Description
ignore	string | string[]	undefined	除外するイベントハンドラを文字列か文字列の配列で指定します。正規表現形式も受け付けます。

Default Severity

warning