Question

我将这些事件侦听器动态附加到元素上，如下所示：

const allTitles = document.querySelectorAll('.question-title');
allTitles.forEach(title => {
   title.addEventListener("click", (e) => {
      // some code goes here using e above
   });
});

我们如何删除所有附加的事件侦听器？由于我们没有提到每个侦听器及其功能，这似乎有点令人困惑。

Answer 1

只需将事件侦听器添加到所有对象的父元素并侦听父元素上的点击

parentElement.addEventListener('click', (e) => {
     console.log(e.target) // this will be your title if you click on that, otherwise you can just return a falsy value
})

Answer 2

将事件侦听器存储在变量中。然后你可以用 removeElementListener 删除它。

var listeners = [];
allTitles.forEach(title => {
   var listener = (e) => {
      // some code goes here using e above
   });
   title.addEventListener("click", listener);
   listeners.push(listener);
});

然后，您可以像这样删除监听器：

title.removeElementListener(listeners[0]);

Answer 3

您可以像添加它们一样删除它们，但使用 removeEventListener。试着先给你用来添加它们的函数一个名字，然后做这样的事情

allTitles.forEach(title => {
  title.removeEventListener("click", onClickFunction});
});

您可以阅读更多相关信息here

Answer 4

简单的答案：不参考事件处理程序，我们不能。至少不优雅。

唯一有效但蛮力的选项是丢弃带有附加侦听器的原始元素并从头开始重新创建它。重新分配 outerHTML 这样做：

allTitles.forEach(title => {
  title.outerHTML = title.outerHTML; // nuke listeners
});

删除元素的动态附加事件侦听器

4 个答案: