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

If your codebase uses code generation that relies on uncommon JavaScript semantics such as inline function expressions in removeEventListener calls, this rule might not be for you. For example, if you use a framework that automatically deduplicates similar function expressions behind-the-scenes, this rule might not apply.

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