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