unicorn/prefer-add-event-listener Suspicious

🚧 An auto-fix is still under development.

What it does

Enforces the use of .addEventListener() and .removeEventListener() over their on-function counterparts.

For example, foo.addEventListener('click', handler); is preferred over foo.onclick = handler; for HTML DOM Events.

Why is this bad?

There are numerous advantages of using addEventListener. Some of these advantages include registering unlimited event handlers and optionally having the event handler invoked only once.

Examples

Examples of incorrect code for this rule:

foo.onclick = () => {};

Examples of correct code for this rule:

foo.addEventListener("click", () => {});

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny unicorn/prefer-add-event-listener

Config (.oxlintrc.json)

{
  "rules": {
    "unicorn/prefer-add-event-listener": "error"
  }
}

References

• Rule Source