jQueryを使用せずに、動的に作成された要素のイベントをリッスンするにはどうすればよいですか?

動的に作成された要素にイベント リスナーを追加する方法

動的コンテンツを組み込んだ Web ページで作業する場合、動的コンテンツではない要素にイベント リスナーを追加する必要がある場合があります。最初はページ上に存在します。このガイドでは、jQuery に依存せずにこれを実現する方法の概要を説明します。

元のアプローチでは、doc.body.addEventListener('click') を利用して、ページの読み込み時に既存の要素のイベントを処理する必要がありました。ただし、動的に生成される要素の場合は、より堅牢なソリューションが必要です。

委任とイベントの伝播

イベント リスナーを動的に追加するための鍵は、イベントの委任です。このアプローチでは、単一のイベント リスナーを親要素 (本文など) にアタッチし、イベントのターゲットをチェックして、クリックされた特定の要素を判断できます。

サンプル コード

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Perform actions specific to 'li' elements
  }
});</code>

この例では、イベント リスナーがボディにアタッチされています。本文内の要素をクリックすると、イベントのターゲットが検査されます。ターゲットが li 要素の場合、必要なアクションが実行されます。

注意事項

提供されたコードは最新のブラウザーと互換性があることに注意してください。 Internet Explorer の古いバージョンとブラウザーの互換性を保つために、ネイティブ イベント関数のカスタム ラッパーが必要になる場合があります。

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