Question

我在动态添加和删除eventListeners时遇到问题。我希望能够将事件侦听器添加到元素的所有子节点。然后，稍后将其删除，然后重新添加。

注意：我知道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创建了一个 new 函数。传递给addEventListener的函数只有在完全相同的函数传递给removeEventListener时才能被删除。绑定函数不同于原始的未绑定函数，因此如果您将removeEventListener传递给未绑定函数，它将无法正常工作。

根据您的情况，一种可能性是使用由HTML元素索引的Map，其值是该元素的绑定侦听器，以便以后可以将其删除：

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>

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

1 个答案: