JavaScript で DOM オブジェクトからすべてのイベント リスナーを削除する方法: 包括的なガイド

Javascript/DOM: DOM オブジェクトからすべてのイベント リスナーを削除する方法

疑問が生じます。DOM オブジェクトからすべてのイベントを完全に削除するにはどうすればよいですか? div などのオブジェクトですか?特に、このクエリは、per div.addEventListener('click',eventReturner(), false);.

Removing All Event Handlers

を使用して追加されたイベントに関係します。要素からすべてのイベント ハンドラー (タイプに関係なく) を削除することが目的の場合は、次の方法を検討してください:

var clone = element.cloneNode(true);

この手法では、DOM プロパティの変更に影響を与えることなく、属性と子が保持されます。

特定のタイプの匿名イベント ハンドラーの削除

別のアプローチは、removeEventListener() メソッドを利用することですが、匿名関数を扱う場合には機能しない可能性があります。ここでの重要な問題は、匿名関数を使用して addEventListener を呼び出すと、関数が呼び出されるたびに一意のリスナーが割り当てられることです。したがって、同じ関数参照を使用してイベント ハンドラーを削除しようとしても効果はありません。

この制限に対処するには、次の 2 つの代替案を検討してください。

1. 名前付き関数を使用する:

function handler() {
     dosomething();
 }

 div.addEventListener('click',handler,false);

2. ラッパー関数の作成:

var _eventHandlers = {}; // somewhere global

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)
 }
...
addListener(div, 'click', eventReturner(), false)

このアプローチにより、ラッパーを作成できます。追加されたイベント リスナーへの参照を保存する関数。対応するremoveAllListeners関数を使用して、これらのハンドラーを削除できます。

以上がJavaScript で DOM オブジェクトからすべてのイベント リスナーを削除する方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。