JavaScript で動的に追加された要素のイベントを処理するには?

JavaScript で動的に追加された要素のイベントを処理する

JavaScript で要素を動的に作成する場合、イベント処理がどのように機能するかを理解することが重要です。デフォルトでは、DOM がまだ更新されていないため、要素が存在する前にイベント リスナーを追加してもイベントはトリガーされません。

この問題を解決するには、イベント委任 を使用します。このアプローチには、既存および将来の動的要素を含む親要素にイベント リスナーをアタッチすることが含まれます。イベントが発生すると、JavaScript コードはイベントのターゲットが動的要素のセレクターと一致するかどうかをチェックします。

提供されているコード例では、リストとボタンが動的に作成されます。

var html = '<ul>';
for (i = 0; i < 5; i++) {
    html = html + '<li>' + name + i + '</li>';
}
html = html + '</ul>';

html = html + '<input type="button" value="prepend">

動的に作成された「先頭に追加」ボタンのクリック イベントを処理するには、イベント委任を使用します。

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

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

ここでは、event委任は、クリック イベント リスナーをドキュメントにアタッチするために使用されます。クリックが発生すると、ターゲット要素またはその先祖のいずれかがセレクター #btnPrepend と一致するかどうかがチェックされます。存在する場合、イベント ハンドラーが実行されます。

イベントの委任により、イベント リスナーがアタッチされた後に動的要素が追加された場合でも、イベントが確実に処理されます。これにより、動的に作成されたコンテンツのイベント処理が簡素化されます。

以上がJavaScript で動的に追加された要素のイベントを処理するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。