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

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});
});

你可以在这里阅读更多关于

Answer 4

简单的答案：如果不引用事件处理程序，我们就不能。至少不优雅。

唯一有效但暴力的选择是丢弃带有附加侦听器的原始元素，然后从头开始重新创建它。重新分配outerHTML可以做到：

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