Javascript I cannot remove eventlistener

November 30, 2023

I have a shortened version of my code below. The thing is I cannot remove the event listener inside a function, which fires a simple alert. Any help?

const resizers = document.querySelectorAll(".resizer");

for (let resizer of resizers) {
  resizer.addEventListener("mousedown", mousedownForResizer);

  function mousedownForResizer(e) {
    console.log('deneme');
  }
}

function deneme() {
  let resizers = document.querySelectorAll(".resizer");
  for (let resizer of resizers) {
    resizer.removeEventListener("mousedown", mousedownForResizer, true);
  }
}

deneme();

.resizer {
  background: grey;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer sw"></div>
<div class="resizer se"></div>

>Solution :

There’s two issues in your code preventing it from working.

Firstly, mouseDownForResizer() is re-defined within the scope of your for loop, so the instances cannot be accessed by deneme(). Use a single instance in scope of both sections of your logic.

Secondly, you’re setting the useCapture argument to true when removing the event, which is incorrect in this instance.

With both of those issues fixed, your code works. You can see it in the following example, although note that this binds and then immediately unbinds the event handlers, so nothing appears to happen when you click the boxes.

function mousedownForResizer(e) {
  alert('deneme');
}

const resizers = document.querySelectorAll(".resizer");
for (let resizer of resizers) {
  resizer.addEventListener("mousedown", mousedownForResizer);
}
console.log('event handlers assigned.');

function deneme() {
  let resizers = document.querySelectorAll(".resizer");
  for (let resizer of resizers) {
    resizer.removeEventListener("mousedown", mousedownForResizer);
  }
  console.log('event handlers removed.');
}
deneme();

div.resizer {
  background: grey;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<div class="resizer ne"></div>
<div class="resizer nw"></div>
<div class="resizer sw"></div>
<div class="resizer se"></div>

Note that you could also cache the .resizers collection retrieved from querySelectorAll(), but I’m assuming that this is just test code for learning and not any production-ready code.