JavaScript で DOM オブジェクトからすべてのイベント ハンドラーを削除する方法

JavaScript/DOM: DOM オブジェクトからすべてのイベント ハンドラーを削除する

質問:

すべてを完全に削除するにはどうすればよいですかdiv などの DOM オブジェクトに関連付けられたイベント?

問題の詳細:

あなたの場合、カスタムの addEventListener を使用して div にイベントを追加しています。関数、eventReturner()。ラッパー関数を返します。これにより、毎回固有のイベント リスナーが作成されます。

解決策:

DOM オブジェクトからすべてのイベント ハンドラーを削除するには、主に 2 つの方法があります:

1 。要素のクローン作成

このアプローチでは、属性と子は保持されますが、DOM プロパティへの変更は保持されません。

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

2.特定のイベント ハンドラーの削除

匿名イベント ハンドラー:

イベント ハンドラーとして使用される匿名関数は、新しいリスナーを繰り返し作成します。 RemoveEventListener はそれらには影響しません。これに対処するには:

• 関数ハンドラーをラップせずに直接使用します。
• 返された関数を追跡し、removeAllEvents をサポートする addEventListener のラッパー関数を作成します。

ラッパーの例:

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