イベントのバブリングとキャプチャ: DOM での伝播を理解する

イベントのバブリングとキャプチャは、HTML DOM API 内のイベントの伝播において重要な役割を果たします。それらの機能を理解するために、これら 2 つの概念の複雑さを掘り下げてみましょう。

イベント バブリングとイベント キャプチャ

別の要素内にネストされた要素でイベントが発生したとき、両方の要素がその特定のイベントのイベント ハンドラーを登録している場合、要素がイベントを受け取る順序はイベント伝播モードによって決まります。 event.

• Event Bubble: イベントは最初に最も内側の要素によってキャプチャおよび処理され、次に外側の親要素に伝播されます。
• Eventキャプチャ: イベントは最初に最も外側の要素によってキャプチャされ、そのネストされた要素に内側に伝播されます。 elements.

トリクル vs. バブリング

キャプチャは「トリクル」とも呼ばれ、伝播順序を覚えるのに役立つ用語です。「トリクル ダウン、バブル」 「

ブラウザのサポート

• Netscape Microsoft はイベント キャプチャを導入しましたが、Microsoft はイベント バブリングを支持しました。
• W3C ドキュメント オブジェクト モデル イベント標準 (2000) には両方が組み込まれています。
• IE

パフォーマンス考慮事項

イベント バブリングは、複雑な DOM ではイベント キャプチャに比べてパフォーマンスが若干低下する可能性があります。

使用方法

addEventListener(type) を利用します。 、リスナー、useCapture) メソッドを使用して、バブリング (デフォルト) モードまたはキャプチャ モードでイベント ハンドラーを登録します。キャプチャ モデルを使用するには、3 番目の引数を true に設定する必要があります。

Example

次の HTML 構造を考えてみましょう:

li 要素でクリック イベントが発生した場合:

• キャプチャ モードでは、イベントは最初に div によって処理され、次に ul、最後にli.
• バブリング モードでは、イベントは最初に li によって処理され、次に ul によって処理され、最後に によって処理されます。 div.

追加リソース

• [QuirksMode でのイベント順序](https://www.quirksmode.org/js/events_order.html )
• [addEventListener オンMDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)
• [QuirksMode の高度なイベント](https://www.quirksmode.org/ js/events/)

インタラクティブデモ

次の対話型の例は、イベント伝播のキャプチャとバブリングのフェーズを示しています。

var logElement = document.getElementById('log');

function log(msg) {
    logElement.innerHTML  = ('
'   msg   '
');
}

function capture() {
    log('capture: '   this.firstChild.nodeValue.trim());
}

function bubble() {
    log('bubble: '   this.firstChild.nodeValue.trim());
}

var divs = document.getElementsByTagName('div');
for (var i = 0; i 
強調表示された要素のいずれかをクリックすると、最初にイベント キャプチャ フェーズが発生し、次にバブリング フェーズが発生することを観察します。