移除已经存在的事件监听器

Question

我正在尝试从对象中删除已经存在的事件侦听器。我尝试了几种方法（使用 jQuery .off()、.unbind(), 标准 removeEventsListeners()），但如文档中所述，它们只能删除以前添加的方法？

使用 Chrome 调试器，我可以看到并移除指定的事件监听器，

另外，当尝试通过jQuery _data() 函数列出事件监听器时，它不会列出事件。几个小时以来一直在寻找答案。

有人可以帮忙吗？有什么解决方法吗？

编辑：我必须保留一些，所以无法克隆。

Answer 1

如果事件处理程序是用addEventListener 添加的，除非您有对添加的处理程序函数的引用，否则您无法删除它。我认为一定是这样，因为如果它与 jQuery 的 on（或它的各种快捷方式）挂钩，off 会起作用，而你说它不起作用。

解决此问题的一种方法是替换 用克隆元素。当您使用 DOM 的 cloneNode 克隆元素时，您不要复制其事件处理程序。所以如果你从element开始，那么你可以克隆它，使用insertBefore插入克隆，然后使用removeChild删除原来的：

var newElement = element.cloneNode(true); // true = deep
element.parentNode.insertBefore(newElement, element);
element.parentNode.removeChild(element);

当然，这确实是一种解决方法。正确的做法是不要一开始就设置处理程序，或者如果您以后需要能够将其删除，请保留对它的引用。

---

在评论中你说你不能这样做，并问：

有没有办法添加一个新的事件侦听器来阻止已经存在的事件侦听器？

只有当你能首先到达那里，否则你不能。

您不能添加阻止现有处理程序的新处理程序（不是以跨浏览器的标准方式），但如果您可以在添加另一个处理程序之前添加您的处理程序，则可以使用 @987654326 阻止它被调用@：

// Your handler
document.getElementById("target").addEventListener("click", function(e) {
  console.log("Your handler");
  e.stopImmediatePropagation();
  e.stopPropagation();
});

// The one that you're trying to prevent
document.getElementById("target").addEventListener("click", function(e) {
  console.log("Handler you're trying to prevent");
});

<div id="target">Click me</div>

因此，例如，如果在 window load 事件或 jQuery ready 处理程序中添加了另一个处理程序，您可以通过将您的代码放在 script 标记中首先获得您的处理程序紧跟在相关元素之后。

Answer 2

这样做的一个非常简单的方法是使用 .innerHTML 不向父元素附加任何内容。请注意，这会破坏作为父元素后代的所有事件侦听器。下面是一个例子（点击 2 销毁附加到 1 的事件监听器）：

const d1 = document.querySelector('#d1');
d1.addEventListener('click', () => console.log(123));

const d2 = document.querySelector('#d2');
d2.addEventListener('click', () => d1.parentNode.innerHTML += '');

<div><button id="d1">1</button></div>
<div><button id="d2">2</button></div>