Question

如果div有一个事件，并且该函数是在一些经过精简的JS中传递的匿名函数。如何从控制台中删除该事件？

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

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

Answer 1

一种选择是替换具有要删除的监听器的div，该监听器具有相同的div（但没有监听器）-遍历原始的div的childNodes并将其附加到新的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>

如何从具有匿名功能的div中删除事件侦听器

1 个答案: