イベントのバブリングとキャプチャ: イベント伝播モードは DOM イベント処理にどのような影響を与えますか?

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

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

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

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

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

トリクル vs. バブリング

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

ブラウザ」サポート

• Netscape はイベント キャプチャを導入しましたが、Microsoft はイベント バブリングを支持しました。
• W3C Document Object Model Events 標準 (2000) には両方が組み込まれています。
• IE < ; 9 はイベント バブリングのみを使用しますが、IE9 とその他の主要なブラウザは両方のメカニズムをサポートしています。

パフォーマンスに関する考慮事項

イベント バブリングは、複雑な DOM と比べてパフォーマンスが若干低い場合があります。イベントへcapture.

使用法

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

例

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

<div>
    <ul>
        <li></li>
    </ul>
</div>

If li 要素でクリック イベントが発生します:

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

追加リソース

• [イベントの順序QuirksMode](https://www.quirksmode.org/js/events_order.html)
• [MDN の addEventListener](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 += ('<p>' + msg + '</p>');
}

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 < divs.length; i++) {
    divs[i].addEventListener('click', capture, true);
    divs[i].addEventListener('click', bubble, false);
}

強調表示されたいずれかをクリックすると要素では、最初にイベント キャプチャ フェーズが発生し、次にバブリング フェーズが続くことを観察します。

以上がイベントのバブリングとキャプチャ: イベント伝播モードは DOM イベント処理にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。