ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery を使用せずに動的に作成された要素のイベント リスナーを処理する方法は?

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

Linda Hamilton
リリース: 2024-10-22 12:08:02
オリジナル
658 人が閲覧しました

How to Handle Event Listeners for Dynamically Created Elements Without jQuery?

動的に作成された要素のイベント リスナー

jQuery を使用せずに動的に生成された要素にイベント リスナーを追加するには、イベント委任を使用できます。その方法は次のとおりです。

イベント委任を使用する
イベント オブジェクトの target プロパティを使用すると、イベントが発生した要素を識別できます。これを使用すると、イベント リスナーを親要素にバインドし、ターゲット要素が特定の基準に応答するかどうかを確認できます。例:

<code class="javascript">document.querySelector('body').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // Do your action on the newly created 'li'
  }
});</code>
ログイン後にコピー

この例では、イベント リスナーが本文にバインドされており、子要素をクリックすると、コードはそれが 'li' かどうかをチェックします。存在する場合、指定されたアクションが実行されます。

警告
このアプローチは、イベント委任メカニズムをサポートする最新のブラウザーで適切に機能することに注意してください。古い IE バージョンの場合、attachEvent.

を使用してカスタム イベント ハンドラーを実装する必要がある場合があります。

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

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート