イベントバブリングとイベントデリゲーションの概念と機能

JS イベント バブルとイベント委任とは何ですか? 具体的なコード例が必要です

イベント バブル (Event Bubble) とイベント デリゲーション (Event Delegation) は 2 種類の JS ですイベント処理に関連する重要な概念。この記事では、両方の概念を詳しく紹介し、具体的なコード例を示してその使用法と実装原理を説明します。

1. イベント バブリング

イベント バブリングとは、要素でイベント (クリック イベントなど) が発生したときに、その要素がイベント ハンドラーを定義している場合、イベントが次のように行われることを意味します。最初にトリガーされ、その後、イベントはドキュメントのルート要素に到達するまで、レベルごとに現在の要素から親要素に伝播します。

イベント バブリング メカニズムを使用すると、子要素ごとに個別のイベント ハンドラーを定義することなく、親要素の複数の子要素に同じイベント ハンドラーを簡単に追加できます。これによりコードが簡素化され、保守しやすくなります。

以下はイベント バブリングのコード例です:

HTML コード:

<div id="parent">
  <div id="child1">子元素1</div>
  <div id="child2">子元素2</div>
</div>

JS コード:

const parent = document.querySelector('#parent');
const child1 = document.querySelector('#child1');
const child2 = document.querySelector('#child2');

parent.addEventListener('click', function(event) {
  console.log('触发父元素的点击事件');
});

child1.addEventListener('click', function(event) {
  console.log('触发子元素1的点击事件');
  event.stopPropagation();
});

child2.addEventListener('click', function(event) {
  console.log('触发子元素2的点击事件');
  event.stopPropagation();
});

上記のコードでは、When子要素 1 または子要素 2 をクリックすると、コンソールに次の出力が順番に表示されます。

触发子元素1的点击事件
触发父元素的点击事件

イベントが親要素にバブルした場合にのみ、親要素のイベント ハンドラーがトリガーされます。 event.stopPropagation() を呼び出して、イベントのバブリングを停止します。

2. イベント委任

イベント委任とは、イベント ハンドラーを親要素にバインドし、適切なアクションを実行するかどうかを決定することを指します。

イベント委任の利点は、新しい子要素が親要素に追加されるときに、イベント ハンドラーを新しい子要素に個別にバインドする必要がなく、イベントが親を通じて直接処理されることです。要素。 。これにより、イベント ハンドラーの数が大幅に削減され、パフォーマンスが向上します。

以下はイベント委任のコード例です:

HTML コード:

<ul id="parent">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

JS コード:

const parent = document.querySelector('#parent');

parent.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    const textContent = event.target.textContent;
    console.log('点击了项目：' + textContent);
  }
});

上記のコードでは、いずれかの li 要素をクリックすると、コンソールはクリックされた項目のテキスト コンテンツを出力します。その後に追加される li 要素の数に関係なく、それらのクリック イベントは親要素によって処理されます。

イベント委任の原則は、イベント バブリングを通じて実装されます。イベントは最初に親要素までバブルアップされ、次にイベントの元のターゲットに基づいて判断され、対応するアクションを実行する必要があるかどうかが決定されます。

概要:

イベント バブリングとイベント委任は、JS でのイベント処理に関連する重要な概念です。イベント バブリングを使用すると、同じイベント ハンドラーを親要素の複数の子要素に簡単に追加できるため、コードの再利用性が向上します。イベント委任は、イベントの元のターゲットに基づいて、イベント ハンドラーを親要素にバインドします。対応する操作により、パフォーマンスが向上し、コードの量が削減されます。実際の開発では、イベントバブリングとイベントデリゲーションを必要に応じて使い分けると、エレガントで効率的なコードを書くことができます。

以上がイベントバブリングとイベントデリゲーションの概念と機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。