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