删除现有的事件监听器

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

当然，这确实是一种解决方法。正确的做法是不要首先设置处理程序，或者在以后需要删除它时保留对其的引用。

---

在评论中，您说您无法做到这一点，并询问：

  

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

只有您可以先先到达，否则，您就不能。

您不能添加新的阻止现有处理程序的处理程序（不是以标准方式跨浏览器），但是如果您可以在添加另一个处理程序之前添加自己的处理程序，则可以防止使用{{ 3}}：

// 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>