DOM 要素からすべてのイベント リスナーを削除するにはどうすればよいですか?

DOM 要素からのイベント リスナーの削除

質問:

DOM 要素にアタッチされているすべてのイベント リスナーを削除することは可能ですか? div などの DOM 要素?

答え:

ご質問のとおり、要件に応じてこれを実現するには複数の方法があります。

すべてのイベント ハンドラーの削除

タイプに関係なく、すべてのイベント ハンドラーを削除するには、要素のクローンを作成し、そのクローンで置き換えます。

var clone = element.cloneNode(true);

注: クローン作成では属性と子は保持されますが、DOM プロパティの変更は保持されません。

特定のイベント タイプの削除

匿名イベント ハンドラー

匿名イベント ハンドラーを追加した場合 (関数をコールバックとして addEventListener に渡すのと機能的に同等)、removeEventListener で問題が発生します。これは、匿名関数が呼び出されるたびに新しいオブジェクトを作成し、それらを具体的に削除することが不可能になるためです。

解決策:

1. イベント ハンドラー関数から関数を取得する場合は、その関数を addEventListener に直接渡します。
2. 返された関数への参照を格納する addEventListener のラッパー関数を作成します。これには、イベント リスナーを削除する別の関数、removeAllEvents が必要です。

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

イベント ハンドラーが非匿名の場合、期待どおりにremoveEventListenerを使用できます。ただし、リスナーの追加に使用したものと同じオブジェクト参照をremoveEventListenerに渡す必要があります。

例:

function eventHandler() {}
div.addEventListener('click', eventHandler);
...
div.removeEventListener('click', eventHandler);

次のことに注意してください。コードで要素の作成と削除が頻繁に行われる場合は、メモリ リークを避けるために、イベント処理ラッパー関数 (提供された例では _eventHandlers) に格納されている参照を管理する必要がある場合があります。

以上がDOM 要素からすべてのイベント リスナーを削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。