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

Question

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

注意:我知道 EventListener 选项。但是这并不能完全解决我的问题。

这是我想要做的一些示例代码:

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 创建了一个新函数。仅当将完全相同的函数传递给 removeEventListener 时，才能删除传递给 addEventListener 的函数。绑定(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>