如何在 JavaScript 中从 DOM 对象中删除所有事件处理程序？

Javascript/DOM：从 DOM 对象中消除所有事件处理程序

问题：

我们如何才能完全删除所有事件处理程序与 DOM 对象（例如 div）关联的事件？

问题阐述：

在您的情况下，您将使用带有自定义的 addEventListener 将事件添加到 div函数 eventReturner()，它返回一个包装函数。这每次都会创建唯一的事件侦听器。

解决方案：

从 DOM 对象中删除所有事件处理程序有两种主要方法：

1 。克隆元素

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

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

2.删除特定事件处理程序

匿名事件处理程序：

用作事件处理程序的匿名函数会重复创建新的侦听器。 RemoveEventListener 对它们没有影响。要解决这个问题：

• 直接使用函数处理程序而不包装它。
• 为 addEventListener 创建一个包装函数，跟踪返回的函数并支持removeAllEvents。

示例包装器：

<code class="javascript">var _eventHandlers = {}; // Global reference

const addListener = (node, event, handler, capture = false) => {
  if (!(event in _eventHandlers)) {
    _eventHandlers[event] = [];
  }
  _eventHandlers[event].push({ node, handler, capture });
  node.addEventListener(event, handler, capture);
};

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event] = _eventHandlers[event].filter(({ node }) => node !== targetNode);
  targetNode.removeEventListener(event, handler, capture);
};</code>

用法：

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

// To remove the event listeners:
removeAllListeners(div, 'click');</code>

注意：如果您的代码运行较长的时间并涉及创建和删除许多元素，请确保从 _eventHandlers 中删除对这些元素的任何引用。

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