イベントバブリングとキャプチャリングとは何ですか? 質問する

Question

イベントバブリングとキャプチャリングは、HTML DOM APIにおけるイベント伝播の2つの方法であり、ある要素内の別の要素でイベントが発生し、両方の要素がそのイベントのハンドルを登録している場合に発生します。イベント伝播モードは、要素がイベントを受信する順序。

バブリングでは、イベントは最初に最も内側の要素によってキャプチャおよび処理され、その後外側の要素に伝播されます。

キャプチャリングでは、イベントは最初に最も外側の要素によってキャプチャされ、内側の要素に伝播されます。

キャプチャは「トリクリング」とも呼ばれ、伝播順序を覚えるのに役立ちます。

滴り落ちる、泡立つ

昔、Netscapeはイベントキャプチャを提唱し、Microsoftはイベントバブリングを推進していました。どちらもW3Cの一部です。ドキュメントオブジェクトモデルイベント標準（2000年）。

IE < 9 回使用イベントのみのバブルIE9+とすべての主要ブラウザは両方をサポートしています。一方、イベントバブリングのパフォーマンスが若干低下する可能性があります複雑な DOM の場合。

addEventListener(type, listener, useCapture)バブリングモード (デフォルト) またはキャプチャモードのいずれかでのイベントハンドラーを登録するにはを使用します。キャプチャモデルを使用するには、3 番目の引数をとして渡しますtrue。

例

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

上記の構造では、li要素内でクリックイベントが発生したと想定します。

キャプチャモデルでは、イベントはdiv最初に（のクリックイベントハンドラーがdiv最初に起動）で処理され、次に、ul最後にターゲット要素ので処理されますli。

バブリングモデルでは、逆のことが起こります。つまり、イベントは最初にによって処理されli、次にによって処理さulれ、最後に要素によって処理されますdiv。

詳細については、

以下の例では、強調表示された要素のいずれかをクリックすると、イベント伝播フローのキャプチャフェーズが最初に発生し、その後にバブリングフェーズが発生することがわかります。

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());
}

function clearOutput() {
    logElement.innerHTML = "";
}

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);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);

p {
    line-height: 0;
}

div {
    display:inline-block;
    padding: 5px;

    background: #fff;
    border: 1px solid #aaa;
    cursor: pointer;
}

div:hover {
    border: 1px solid #faa;
    background: #fdd;
}

<div>1
    <div>2
        <div>3
            <div>4
                <div>5</div>
            </div>
        </div>
    </div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>

JSFiddleの別の例。

Answer 1