javascript - 动态添加和删除事件监听器

Question

我在动态添加和删除 eventListener 时遇到问题。我希望能够向元素的所有子节点添加事件监听器。然后稍后删除它们，然后将它们添加回去。

注意:我知道 EventListener options.once 但这并不能完全解决我的问题。

这是我正在尝试做的一些示例代码:

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?
}

谢谢大家!

Answer 1

问题是 .bind 创建了一个新 函数。传递给 addEventListener 的函数只有在 完全相同的函数 传递给 removeEventListener 时才能删除。绑定(bind)函数与原始未绑定(bind)函数不同，因此如果您将未绑定(bind)函数传递给它，removeEventListener 将不起作用。

在您的情况下，一种可能性是使用由 HTML 元素索引的 Map，其值是该元素的绑定(bind)监听器，以便稍后可以删除它们:

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>