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

从 DOM 对象中删除事件监听器

删除所有事件处理程序

要从对象中删除所有事件处理程序，您可以克隆该元素并替换它与克隆：

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

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

使用匿名函数删除事件处理程序

您可以删除事件具有匿名函数的处理程序，通过存储对返回函数的引用并创建一个单独的函数来删除所有事件：

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

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

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event]
    .filter(({ node }) => node === targetNode)
    .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))

  _eventHandlers[event] = _eventHandlers[event].filter(
    ({ node }) => node !== targetNode,
  )
}</code>

这允许您使用以下方式添加和删除事件侦听器：

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

直接事件处理

如果使用匿名函数来处理事件，则可以直接添加和删除：

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

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

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