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 中国語 Web サイトの他の関連記事を参照してください。