JavaScript で DOM オブジェクトからイベント リスナーを削除するにはどうすればよいですか?

DOM オブジェクトからのイベント リスナーの削除

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

オブジェクトからすべてのイベント ハンドラーを削除するには、要素を複製して置き換えます。クローンを使用してそれを実行します:

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

このメソッドは属性と子を保持しますが、DOM プロパティは変更しません。

匿名関数を使用したイベント ハンドラーの削除

イベントを削除できます返された関数への参照を保存し、すべてのイベントを削除する別の関数を作成することで、匿名関数を持つハンドラーを作成します:

<code class="javascript">var _eventHandlers = {};

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)
}

const removeAllListeners = (targetNode, event) => {
  _eventHandlers[event]
    .filter(({ node }) => node === targetNode)
    .forEach(({ node, handler, capture }) => node.removeEventListener(event, handler, capture))

  _eventHandlers[event] = _eventHandlers[event].filter(
    ({ node }) => node !== targetNode,
  )
}</code>

これにより、以下を使用してイベント リスナーを追加および削除できます:

<code class="javascript">addListener(div, 'click', eventReturner(), false)
removeAllListeners(div, 'click')</code>

直接イベント処理

匿名関数を使用してイベントを処理する場合は、単純に直接追加および削除できます:

<code class="javascript">function handler() {
  dosomething();
}

div.addEventListener('click',handler,false);</code>

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