jQuery を使用せずに動的に生成された要素のイベント リスナー アタッチメントを処理する方法は?

動的イベント リスナーの添付ファイル

所有していない Web ページ上で動的に生成された要素にイベント リスナーを添付したいと考えています。 jQuery を使用できないため、代替ソリューションを探します。

このシナリオでは、イベント委任が実行可能なアプローチです。リスナーを上位レベルの要素 (body など) にアタッチすると、動的に作成されたものも含め、その子要素からバブルアップするイベントをキャプチャできます。

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

このスニペットでは:

• クリック イベント リスナーを body 要素に追加します。
• クリック イベントが発生すると、event.target の tagName を確認します。
• ターゲットが < の場合;リ>

このアプローチはイベント バブリングに依存していることに注意してください。このメカニズムをサポートしていない一部の古いブラウザでは機能しない可能性があります。さらに、動的に生成された要素が他の要素内にネストされている場合 (例:

内の
• )、それに応じてイベント委任セレクターを調整する必要がある場合があります。

以上がjQuery を使用せずに動的に生成された要素のイベント リスナー アタッチメントを処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。