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

Question

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

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

我们如何删除所有附加的事件侦听器？ 由于我们没有引用每个侦听器，它是 function，这似乎有点令人困惑。

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 。 尝试先给你用来添加名称的 function 起一个名字，然后做这样的事情

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

你可以在这里阅读更多关于它的信息

Answer 4

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

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

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