no-event-handler-attr

Warn when specifying the event handler attribute.

❌ Examples of incorrect code for this rule

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

✅ Examples of correct code for this rule

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

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

Details

Setting value

Type: boolean | string[]

• true (default): Disallow all event handler attributes.
• string[]: Disallow only the specified events. Event handlers not listed will be allowed. Event names should be lowercase without the on prefix (e.g. "click", not "onclick"). A regex pattern (e.g. /^mouse/) is also accepted.

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

To disallow only specific events:

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

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

Using a regex pattern:

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

ignore option

The ignore option excludes specific attributes by their full attribute name (with the on prefix, e.g. "onclick"). It is evaluated before the value filter. Both a plain string and a regex pattern are accepted.

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

In the example above, onclick is excluded by ignore, so only onmousedown is reported.

Framework directives

Event-binding directives such as Vue's @click, Alpine.js's x-on:click, htmx's hx-on:click, and Svelte's on:click are not reported, even though they resolve to an onXxx name. Each framework's spec package marks them as directive attributes, and this rule skips any attribute so marked.

<!-- Not reported: a Vue directive, not a literal HTML attribute -->
<button @click="doSomething">Click</button>

Interface

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

Set to true to disallow all event handler attributes, or specify an array of event names (without the 'on' prefix) to selectively disallow.

Options

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

Property	Type	Default Value	Description
ignore	string | string[]	undefined	Specify the event handler to ignore as string or string array. It accepts even in a regex format.

Default Severity

warning