如何從 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中文網其他相關文章！