JavaScriptのイベントバブリングとキャプチャリングを初心者向けにわかりやすく解説

JavaScriptでイベント処理を扱う際、イベントバブリングとイベントキャプチャリングという2つの重要な概念を理解しておくことは不可欠です。これらは、ネストされた要素に対してイベントリスナーが登録されている場合に、イベントハンドラが呼び出される順序を決定する仕組みです。

イベントバブリングとは？

イベントバブリングとは、ある要素が別の要素の中にネストされていて、両方の要素が同じ種類のイベント（例：クリック）に対するリスナーを登録している場合に、イベントがまず最も内側の要素で捕捉・処理され、その後外側の要素へと伝播していく動作のことです。

イメージとしては、水中で泡（バブル）が下から上へ浮かんでいくように、イベントが内側から外側へ向かって伝わっていきます。

イベントキャプチャリングとは？

一方、イベントキャプチャリングでは逆の順序になります。つまり、イベントは最初に最も外側の要素で捕捉され、そこから内側の要素へと伝播していきます。

共通のHTML構造

以下の2つの例では、次のようなHTMLを使用します。赤色の外側のdivの中に、黄色の内側のdivが配置されています。

<div id='outer' style='background-color:red;display:inline-block;padding:50px;'>
    Outer Div
    <div id='inner' style='background-color:yellow;display:inline-block;padding:50px;'>
        Inner Div
    </div>
</div>

1. イベントバブリングの例

addEventListener の第3引数に false を指定すると（デフォルト値）、バブリングフェーズでイベントが処理されます。

document.querySelector('#outer').addEventListener('click', e => {
    console.log('Outer div is clicked');
}, false);
document.querySelector('#inner').addEventListener('click', e => {
    console.log('Inner div is clicked');
}, false);

上記のコードを実行し、内側のdivをクリックすると、コンソールには以下の順序でログが出力されます。

Inner div is clicked
Outer div is clicked

この結果から、イベントが内側の要素（inner）から先に処理され、その後外側の要素（outer）へと伝播したことがわかります。これがイベントバブリングの動作です。

2. イベントキャプチャリングの例

次に、addEventListener の第3引数に true を指定すると、キャプチャリングフェーズでイベントが処理されます。

document.querySelector('#outer').addEventListener('click', e => {
    console.log('Outer div is clicked');
}, true);
document.querySelector('#inner').addEventListener('click', e => {
    console.log('Inner div is clicked');
}, true);

同様に内側のdivをクリックすると、今度はログの出力順序が逆になります。

Outer div is clicked
Inner div is clicked

このように、キャプチャリングモードではイベントが外側の要素（outer）から先に捕捉され、その後内側の要素（inner）へと伝播します。

まとめ

イベントの伝播は、実際には「キャプチャリング → ターゲット → バブリング」という3つのフェーズで行われます。addEventListener の第3引数（または options オブジェクトの capture プロパティ）を true にするとキャプチャリングフェーズで、false にするとバブリングフェーズでハンドラが実行されます。

この仕組みを理解しておくと、イベントデリゲーション（委譲）などの高度なテクニックや、意図しないイベントの多重発火を防ぐ stopPropagation() メソッドの使いどころなども把握しやすくなります。