如何在 JavaScript 中从 DOM 对象中删除所有事件监听器？

如何在 Javascript/DOM 中删除 DOM 对象的所有事件监听器

简介

Javascript 提供了各种方法向 DOM 对象添加和删除事件侦听器。但是，了解如何删除附加到对象的所有事件侦听器可能具有挑战性。

删除所有事件处理程序

要从任何对象中删除所有事件处理程序，您可以使用以下方法：

<code class="javascript">const clone = element.cloneNode(true);</code>

此方法保留属性和子级，但不保留对 DOM 属性的任何更改。

删除特定事件的匿名事件处理程序类型

在事件侦听器注册期间将函数用作回调而不为函数分配名称时，会创建匿名事件处理程序。这些处理程序无法使用removeEventListener()删除。

要处理这种情况，您可以：

1. 直接使用该函数而不是返回函数：

<code class="javascript">function handler() {
  dosomething();
}

div.addEventListener('click', handler, false);</code>

2. 创建一个包装函数来存储对匿名函数的引用，并将其与自定义 addEventListener() 和 removeAllListeners() 函数一起使用：

<code class="javascript">const addListener = (node, event, handler, capture = false) => {
  // Store references to handlers and nodes
  // ...
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  // Remove listeners from specified nodes
  // ...
};</code>

用法

<code class="javascript">addListener(div, 'click', eventReturner(), false);
// ...
removeAllListeners(div, 'click');</code>

注意：

销毁对象时确保从 _eventHandlers 全局变量中删除事件处理程序引用，以防止内存泄漏。

以上是如何在 JavaScript 中从 DOM 对象中删除所有事件监听器？的详细内容。更多信息请关注PHP中文网其他相关文章！