JavaScript イベント リスナーが動的に作成された要素で動作しないのはなぜですか? イベント委任を使用して修正するにはどうすればよいですか?

JavaScript での動的イベント処理

Web アプリケーションを操作する場合、多くの場合、ページ上の要素を動的に作成して操作する必要があります。ただし、動的に作成された要素にイベント ハンドラーをアタッチするのは難しい場合があります。

問題

提供されたコード スニペットでは、HTML ボタンが動的に作成され、DOM に挿入されます。 。イベント リスナーがこのボタンにアタッチされますが、ボタンをクリックしてもイベント ハンドラーはトリガーされません。

イベント委任

問題は、イベント リスナーがは、DOM に追加される前にボタンにアタッチされます。ボタンが動的に作成されると、後で DOM にアタッチされますが、イベント リスナーの呼び出しはすでに発生しています。

これに対する解決策は、イベント委任です。イベント委任には、ターゲット要素に直接ではなく、親要素にイベント リスナーをアタッチすることが含まれます。イベントが発生すると、イベントは、アタッチされたイベント リスナーを持つ親要素に到達するまで、DOM ツリーを上に伝播します。

例

document.addEventListener("click", function(e) {
  const target = e.target.closest("#btnPrepend"); // Or any other selector.

  if (target) {
    // Do something with `target`.
  }
});

この例ではでは、closest() メソッドを使用して、クリック イベントが #btnPrepend 要素またはその子孫内で発生したかどうかを判断します。その場合、ターゲット変数はクリックされた要素を参照します。

jQuery の代替

jQuery は、on() を使用してイベントの委任を簡素化します。 method.

$(document).on("click", "#btnPrepend", function() {
  // Do something with `$(this)`.
});

結論

イベント委任は、動的に作成された要素にイベント ハンドラーをアタッチするための信頼できる方法を提供します。イベント リスナーを親要素にアタッチすると、ターゲット要素が後で DOM に追加された場合でもイベント ハンドラーが確実にトリガーされます。

以上がJavaScript イベント リスナーが動的に作成された要素で動作しないのはなぜですか? イベント委任を使用して修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。