JavaScript で動的に作成された要素にイベント リスナーをアタッチするにはどうすればよいですか?

JavaScript で動的に作成された要素にイベントを追加する

動的に作成されたリストに動的要素を追加し、イベント リスナーを要素が動的に作成されると、イベントが発生しない可能性があります。これは、イベント リスナーがアタッチされる時点では要素が使用できないためです。

この問題に対処するには、イベント委任を使用できます。この手法には、動的に作成された要素を含む上位レベルの要素にイベント リスナーをアタッチすることが含まれます。

たとえば、次のコードを考えてみましょう。

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

  if (target) {
    // Do something with 'target'
  }
});

この例では、イベント リスナーは次のとおりです。ドキュメント オブジェクトにアタッチされ、クリック イベントをリッスンします。 close() 関数は、クリック イベントがセレクター #btnPrepend (またはその他の定義されたセレクター) を持つ要素から発生したかどうかを判断するために使用されます。一致するものが見つかった場合、イベントはそれに応じて処理されます。

あるいは、jQuery はイベント委任に対する簡略化されたアプローチを提供します。

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

このメソッドは、イベント リスナーをドキュメント オブジェクトにアタッチし、リッスンします。特にセレクター #btnPrepend.

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