イベントバブリングとイベントキャプチャの原理と方法を理解して実装する

イベントバブリングとイベントキャプチャの原理と実装方法

イベントバブリング(Event Bubble)とイベントキャプチャ(Event Capturing)はJavaScriptによるDOM処理(ドキュメントオブジェクト)モデル）イベントの 2 つの異なるメカニズム。その原則と実装を理解することは、イベントをより深く理解し、処理するのに役立ちます。

イベント バブリングの原則:
イベント バブリングとは、特定の DOM 要素で特定のイベントが発生したときに、その要素がイベントの処理関数を定義している場合、まずその要素でイベントがトリガーされ、その後、その後、ドキュメント ルート要素のハンドラー関数がトリガーされるまで、要素の親要素までバブルアップします。

実装方法:
JavaScript では、addEventListener メソッドを使用して要素にイベント リスナーを追加し、イベント バブリングを実現できます。
次は例です:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
});

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
});

btn.addEventListener('click', function(event) {
  console.log('按钮被点击！');
  event.stopPropagation(); // 阻止事件冒泡
});

上記のコードでは、ボタンをクリックすると、最も内側の要素から上に向かって段階的にイベント バブリングがトリガーされます。ボタンが実行され、次に内側の div のイベント処理関数、最後に外側の div のイベント処理関数です。

イベント キャプチャの原則:
イベント キャプチャはイベント バブリングの逆です。イベント キャプチャとは、ドキュメント ルート要素から開始して、特定のイベントがトリガーされるまで DOM ツリーの各要素を下っていくという意味です。イベントハンドラーがトリガーされます。

実装方法:
同様に、addEventListener メソッドを使用して要素にイベント リスナーを追加し、イベント キャプチャを実現できます。
次は例です:

// HTML代码：
<div id="outer">
  <div id="inner">
    <button id="btn">按钮</button>
  </div>
</div>

// JavaScript代码：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');

outer.addEventListener('click', function() {
  console.log('外层div被点击！');
}, true);

inner.addEventListener('click', function() {
  console.log('内层div被点击！');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击！');
}, true);

上記のコードでは、ボタンをクリックすると、イベントはドキュメントのルート要素から開始され、下に向かって段階的にトリガーされます。最初に外側の div が実行され、次に内側の div のイベント処理関数が実行され、最後にボタンのクリック イベント処理関数が実行されます。

概要:
イベント バブリングとイベント キャプチャは、JavaScript で DOM イベントを処理するための 2 つの異なるメカニズムであり、DOM ツリーに沿ってさまざまな方向にイベントを伝播します。イベント バブリングはトリガー要素から開始され、ドキュメント ルート要素までバブルアップします。イベント キャプチャはドキュメント ルート要素から開始され、トリガー要素まで伝播します。 addEventListener メソッドを使用して要素にイベント リスナーを追加し、3 番目のパラメーターでイベント キャプチャまたはバブリングを使用するかどうかを設定できます。

以上がイベントバブリングとイベントキャプチャの原理と方法を理解して実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。