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

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

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

• EventTarget.removeEventListener()