noInvalidRemoveEventListener (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.6.5
Diagnostic Category: lint/nursery/noInvalidRemoveEventListener
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as unicorn/no-invalid-remove-event-listener

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noInvalidRemoveEventListener": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow passing a newly created function to removeEventListener().

removeEventListener() only removes a listener when it receives the exact same function that was passed to addEventListener(). An inline function, or the result of calling .bind(), creates a new function every time the code runs. Such a function was never added as a listener, so the call does nothing and the original listener stays attached.

Examples

Invalid

1
window.removeEventListener("click", listener.bind(window));

code-block.js:1:46 lint/nursery/noInvalidRemoveEventListener ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The function returned by .bind() is never removed by removeEventListener().
  
  > 1 │ window.removeEventListener("click", listener.bind(window));
      │                                              ^^^^
    2 │ 
  
  ℹ .bind() returns a new function every time it's called, so it can't be the same function that was passed to addEventListener(). The original listener stays attached.
  
  ℹ Store the listener in a variable or property, and pass that same reference to both addEventListener() and removeEventListener().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

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

code-block.js:1:37 lint/nursery/noInvalidRemoveEventListener ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This inline function is never removed by removeEventListener().
  
  > 1 │ window.removeEventListener("click", () => {});
      │                                     ^^^^^
    2 │ 
  
  ℹ An inline function is a new function, so it can't be the same function that was passed to addEventListener(). The original listener stays attached.
  
  ℹ Store the listener in a variable or property, and pass that same reference to both addEventListener() and removeEventListener().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
window.removeEventListener("click", function () {});

code-block.js:1:37 lint/nursery/noInvalidRemoveEventListener ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ This inline function is never removed by removeEventListener().
  
  > 1 │ window.removeEventListener("click", function () {});
      │                                     ^^^^^^^^^^^
    2 │ 
  
  ℹ An inline function is a new function, so it can't be the same function that was passed to addEventListener(). The original listener stays attached.
  
  ℹ Store the listener in a variable or property, and pass that same reference to both addEventListener() and removeEventListener().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

1
class MyElement extends HTMLElement {
2
    handler() {}
3

4
    disconnectedCallback() {
5
        this.removeEventListener("click", this.handler.bind(this));
6
    }
7
}

code-block.js:5:56 lint/nursery/noInvalidRemoveEventListener ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The function returned by .bind() is never removed by removeEventListener().
  
    4 │     disconnectedCallback() {
  > 5 │         this.removeEventListener("click", this.handler.bind(this));
      │                                                        ^^^^
    6 │     }
    7 │ }
  
  ℹ .bind() returns a new function every time it's called, so it can't be the same function that was passed to addEventListener(). The original listener stays attached.
  
  ℹ Store the listener in a variable or property, and pass that same reference to both addEventListener() and removeEventListener().
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

1
const listener = () => {};
2
window.addEventListener("click", listener);
3
window.removeEventListener("click", listener);
4

5
window.removeEventListener("click", getListener());
6

7
class MyElement extends HTMLElement {
8
    constructor() {
9
        super();
10
        this.handler = this.handler.bind(this);
11
    }
12

13
    handler() {}
14

15
    disconnectedCallback() {
16
        this.removeEventListener("click", this.handler);
17
    }
18
}