Prevent calling EventTarget#removeEventListener() with the result of an expression

💼 This rule is enabled in the ✅ recommended config.

The removeEventListener function must be called with a reference to the same function that was passed to addEventListener. Calling removeEventListener with an inline function or the result of an inline .bind() call is indicative of an error, and won't actually remove the listener.

Fail

window.removeEventListener('click', fn.bind(window));

window.removeEventListener('click', () => {});

window.removeEventListener('click', function () {});

class MyElement extends HTMLElement {
	handler() {}

	disconnectedCallback() {
		this.removeEventListener('click', this.handler.bind(this));
	}
}

Pass

window.removeEventListener('click', listener);

window.removeEventListener('click', getListener());

class MyElement extends HTMLElement {
	constructor() {
		super();
		this.handler = this.handler.bind(this);
	}

	handler() {}

	disconnectedCallback() {
		this.removeEventListener('click', this.handler);
	}
}