Removing Event Listener Which Was Added with Bind

Removing event listener which was added with bind

Although what @machineghost said was true, that events are added and removed the same way, the missing part of the equation was this:

A new function reference is created after .bind() is called.

See Does bind() change the function reference? | How to set permanently?

So, to add or remove it, assign the reference to a variable:

var x = this.myListener.bind(this);
Toolbox.addListener(window, 'scroll', x);
Toolbox.removeListener(window, 'scroll', x);

This works as expected for me.

Remove event listener that has been added using bind(this)

It's not possible with your current implementation - every call of .bind creates a new separate function, and you can only call removeEventListener to remove a listener if the passed function is the same (===) as the one passed to addEventListener (just like .includes for arrays, or .has for Sets):

const fn = () => 'foo';console.log(fn.bind(window) === fn.bind(window));

Javascript: addEventListener(), removeEventListener() and bind()

The issue boils down to - Function.prototype.bind returns a new function. It works when you set the bound function to a variable and use it in both addEventListener and removeEventListener because both are referencing the same function. The first block of code does not work because they are referencing different functions. Here is a contrived example:

function foo () {}

// does not work because foo.bind() returns a new function each time
// these functions are not the same object
document.addEventListener('click', foo.bind())
document.removeEventListener('click', foo.bind())

//does work because both reference the same function
var boundFoo = foo.bind()

document.addEventListener('click', boundFoo)
document.removeEventListener('click', boundFoo)

I can't speak much to how jQuery handles events under the hood, but there is no getting around this behavior in vanilla JS.

Add and Remove Event Listener - JavaScript

    const clickEventListener = ['click', function (event) { 
      customFunction(event, args1, args2) 
    }];
    element.addEventListener(...clickEventListener);
    element.removeEventListener(...clickEventListener);

This fix my problem.

medium link

Add and Remove an Event Listener with an arrow function callback

You need a reference to the exact same function object, to be able to remove that specific event listener again.

So you have to store it into a variable, and then use that variable in both the addEventListener and removeEventListener calls.

let foo = () => callback(id);

document.querySelector('#button').addEventListener('click', foo);

// ...

document.querySelector('#button').removeEventListener('click', foo);

---

Related Topics