使用循环删除事件侦听器仅删除最后一个元素的侦听器

Question

I have 3 elemenets in HTML collection and attach onclick listeners to them using forEach loop

[].forEach.call(signBoxes, (e, i) => {
  e.addEventListener("click", callSetSign = () => setSign(signs[i]));
});

function setSign({ name, src }) {
  const sign = name;
  const Img = src;
  player1Choice.src = Img;
  [].forEach.call(signBoxes, (e, i) => {
    e.removeEventListener("click", callSetSign);
  });
  socket.emit("self-choose-sign", sign);
}

Adding listeners works fine, however when I try to remove them in the same way, only the last element's listener is removed. If I alter the function like this, i get the same result.

function setSign({ name, src }) {
  const sign = name;
  const Img = src;
  player1Choice.src = Img;
  signBoxes[0].removeEventListener('click', callSetSign)
  signBoxes[1].removeEventListener('click', callSetSign)
  signBoxes[2].removeEventListener('click', callSetSign) // only this one works
  socket.emit("self-choose-sign", sign);
}

Can someone explain this?

Answer 1

You can use an element's dataset object to pass parameters of type string to the event handler.

Obviously attempts to place parameters on the function object will simply over-write a property of the same name, and the .bind method does not return the function it was called on. Attempts to pass parameters in a closure or by calling bind will result in multiple handler function objects.

An untested example of the dataset approach:

[].forEach.call(signBoxes, (e, i) => {
  e.dataset.index = i;  // store index on element
  e.addEventListener("click", setSign);
});

function setSign() {
  const { name, src } = signs[this.dataset.index];; // lookup using index
  const sign = name;
  const Img = src;
  player1Choice.src = Img;
  [].forEach.call(signBoxes, (e, i) => {
    e.removeEventListener("click", setSign);
  });
  socket.emit("self-choose-sign", sign);
}