Javascript 动态添加和删除事件侦听器

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

注意：我知道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?
}

---

谢谢大家

问题在于

.bind

创建了一个新函数。只有将完全相同的函数传递给

removeentlistener

时，才能删除传递给

addEventListener

的函数。绑定函数与原始未绑定函数不同，因此如果将未绑定函数传递给它，则

removeEventListener

将不起作用

在您的情况下，一种可能是使用由HTML元素索引的

映射

，其值是该元素的绑定侦听器，以便以后可以删除它们：

const listenerMap=newmap（）；
const cont=document.querySelector（“.container”）；
[…cont.children].forEach（c=>{
const listener=clicked.bind（c）；
set（c，listener）；
c、 addEventListener（“单击”，侦听器）；
});
函数单击（）{
log（`removing event listener from${this}`）；
this.removeEventListener（“单击”，listenerMap.get（this））；
}

一
二
三

啊，现在这很有意义。我还意识到，在我的示例中，我绑定的对象是冗余的，但是在我的实际代码中，我绑定了多个对象（其中一个是该子节点的索引）。谢谢你的回复！