Prefer .addEventListener() and .removeEventListener() over on-functions

💼 This rule is enabled in the ✅ recommended config.

🔧 This rule is automatically fixable by the --fix CLI option.

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. 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.

In most cases, it is safe to replace the on-function with the corresponding addEventListener counterpart, which is why this rule contains a fixer that swaps it automatically for you. For example, you might be assigning some static functionality to a UI button when the page first loads, and in this context, the functionality of the two would be equivalent.

However, if you are assigning a listener in a dynamic context, then this rule's auto-fixer will make your code bugged. This is because the on assignment replaces the current listener, but the addEventListener adds an additional listener in addition to the ones that are already assigned. For example, if you are dynamically updating the functionality of a button as new data comes in, then using addEventListener would not work, since it would cause N functions to be invoked for every previous data state. In this context, you should probably disable this lint rule and use the on form, since removing existing event listeners is not possible.

Fail

foo.onclick = () => {};

foo.onkeydown = () => {};

foo.bar.onclick = onClick;

foo.onclick = null;

Pass

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

foo.addEventListener('keydown', () => {});

foo.bar.addEventListener('click', onClick);

foo.removeEventListener('click', onClick);

Options

excludedPackages

"unicorn/prefer-add-event-listener": [
	"error", {
		"excludedPackages": [
			"koa",
			"sax"
		]
	}
]

This option lets you specify a list of packages that disable the rule when imported. By default, koa and sax are listed.

With koa, this would still pass:

import Koa from 'koa';

const app = new Koa();

app.onerror = () => {};