Adding and Removing Event Listeners Dynamically

Question

I am having issues dynamically adding and removing eventListeners. I want to be able to add an event listener to all child nodes of an element. Then at a later time remove them, and add them back.

Note: I am aware of EventListener options.once however this doesn't exactly solve my case.

Here is some sample code of what I am trying to do:

var cont;

window.onload = function() {
  cont = document.querySelector(".container");
  [...cont.children].forEach(c => {
    c.addEventListener("click", clicked.bind(c))
  });
}

function clicked() {
  console.log(`removing event listener from ${this}`);
  this.removeEventListener("click", clicked); //Not actually removing - why?
}

Thanks everyone!

CertainPerformance · Accepted Answer · 2018-10-13 02:36:38Z

2

The problem is that .bind creates a new function. The function passed to addEventListener can only be removed if that exact same function is passed to removeEventListener. A bound function is not the same as the original unbound function, so removeEventListener won't work if you pass it the unbound function.

In your situation, one possibility would be to use a Map indexed by the HTML elements, whose value is the bound listener for that element, so that they can then be removed later:

const listenerMap = new Map();
const cont = document.querySelector(".container");

[...cont.children].forEach(c => {
  const listener = clicked.bind(c);
  listenerMap.set(c, listener);
  c.addEventListener("click", listener);
});

function clicked() {
  console.log(`removing event listener from ${this}`);
  this.removeEventListener("click", listenerMap.get(this));
}

<div class="container">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>

edited Oct 13, 2018 at 2:36

answered Oct 13, 2018 at 2:32

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blued00d Over a year ago

Ah this makes a lot of sense now. I also realize in my example the object I was binding was redundant however in my real code I am binding multiple things (one of them being the index of that child node). Thanks for the response!

Collectives™ on Stack Overflow

Adding and Removing Event Listeners Dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related