removeEventListenerExpressions

Disallow inline function expressions in removeEventListener calls.

✅ This rule is included in the browser logical preset.

The removeEventListener method requires the exact same function reference that was passed to addEventListener in order to successfully remove the event listener. Passing an inline arrow function or function expression to removeEventListener creates a new function instance each time, which means the listener will never be removed because it doesn’t match the original reference.

This is a common mistake that leads to memory leaks and unexpected behavior, as event listeners remain attached to elements even after attempts to remove them.

Examples

❌ Incorrect

element.removeEventListener("click", () => {
  console.log("clicked");
});

element.removeEventListener("click", function () {
  console.log("clicked");
});

window.removeEventListener("resize", () => handleResize());

✅ Correct

const handler = () => {
  console.log("clicked");
};
element.removeEventListener("click", handler);

function handler() {
  console.log("clicked");
}
element.removeEventListener("click", handler);

element.removeEventListener("click", this.handleClick);

Options

This rule is not configurable.

When Not To Use It

This rule should generally always be enabled, as inline function expressions in removeEventListener calls are always ineffective and represent programming errors.

Further Reading

• MDN: EventTarget.removeEventListener()
• MDN: EventTarget.addEventListener()

Equivalents in Other Linters

• ESLint: unicorn/no-invalid-remove-event-listener
• Oxlint: unicorn/no-invalid-remove-event-listener