removeEventListener() should not be called with a newly created function

  • BAD_REMOVE_EVENT_LISTENER
  • Error
  • Medium
  • No tags

This rule applies when removeEventListener() is called with a newly created function.

The removeEventListener() method can only remove the exact function instance that was added at the addEventListener() call. So, when a newly created function is passed, it does nothing.

This alarm is likely to be caused by a programmer's misunderstanding that if two functions have the same textual body, they will represent the same function instance. Also, it could result from the Function.prototype.bind() that always generates a new function instance.

Unremoved listeners would cause a memory leak. To fix this problem, you should keep the reference of the added handler and use it as the argument of the removeEventListener().

Noncompliant Code Example

View with compliant examples side by side
export class Foo {
    update() {
        doUpdate(this);
    }
    addHandlers() {
        document.addEventListener("keydown", () => foo());
        document.addEventListener("click", this.update.bind(this));
    }
    removeHandlers() {
        document.removeEventListener("keydown", () => foo()); // BAD_REMOVE_EVENT_LISTENER alarm
        document.removeEventListener("click", this.update.bind(this)); // BAD_REMOVE_EVENT_LISTENER alarm
    }
}

Compliant Code Example

View with noncompliant examples side by side
export class Foo {
    keydownHandler() {
        foo();
    }
    update = () => {
        doUpdate(this);
    }
    addHandlers() {
        document.addEventListener("keydown", this.keydownHandler);
        document.addEventListener("click", this.update);
    }
    removeHandlers() {
        document.removeEventListener("keydown", this.keydownHandler);
        document.removeEventListener("click", this.update);
    }
}

Version

This rule was introduced in DeepScan 1.28.0.

See