如何从具有匿名函数的 div 中删除事件侦听器答案

【问题标题】：How to remove an event listener from a div that has an anonymous function如何从具有匿名函数的 div 中删除事件侦听器
【发布时间】：2018-11-19 01:57:21
【问题描述】：

如果一个 div 有一个事件，并且该函数是一个匿名函数，传入一些长的缩小的 JS。如何从控制台中删除该事件？

我尝试过克隆和替换，或者替换outerHTML，但是这两种方法都会影响所有的innerHTML。

有没有办法在不引用函数本身的情况下删除 eventListener？只需删除所有附加到 div 的事件监听器？

【问题讨论】：

but both methods affect all the innerHTML. 你的意思是这个问题是任何附加到 children 的监听器也会被删除，这是你不想要的吗？（您只希望删除附加到外部 div 的侦听器？）或者，更改 innerHTML 有什么问题？
一个答案很简单：否：有没有办法在不引用函数本身的情况下删除 eventListener？ 原因在于 JS 如何比较对象（函数对象在这种情况下）。它们通过引用进行比较 - 因此add.. 和 remove... 都必须使用 reference 到同一对象。
@CertainPerformance 是的，不影响任何内部事件或元素，或其状态。
@RandyCasburn 我不明白的是，您可以轻松删除样式、类等属性...而无需引用 getElementById.thing = null 以外的任何内容
对 - 这是因为运行时正在查找用作事件处理程序的函数，相当于一个查找表。它根据提供的引用（对函数）和存储在查找表中的所有引用的比较来评估要删除的事件。正是通过比较来区分这个特殊的事物。

标签： javascript addeventlistener

【解决方案1】：

一种选择是替换具有您想要删除的侦听器的div 使用相同的 div（但没有侦听器） - 遍历原始div 的@987654323 @ 并将它们附加到新的div。正如您在下面的示例中看到的，#outer 容器被替换，但 #inner 上的侦听器仍被保留：

const [outer, inner] = ['outer', 'inner'].map(id => document.getElementById(id));
outer.addEventListener('click', () => console.log('outer clicked'));
inner.addEventListener('click', () => console.log('inner clicked'));

const outerParent = outer.parentElement;
const newOuter = outer.cloneNode(false);
/*
 * make sure to use false above for a shallow copy (no children);
 * if you create and use a deep copy, listeners attached to outer's old children won't be preserved
 * (the listeners don't get copied)
 */
 
[...outer.childNodes].forEach(child => {
  newOuter.append(child)
});
outerParent.replaceChild(newOuter, outer);

<div id="outer">
  inside outer
  <div id="inner">
    inner
  </div>
  inside outer
</div>

【讨论】：