JavaScriptのイベントフローとは？バブリングとキャプチャリングの違いをコード例で解説

JavaScriptにおけるイベントフローは、主に次の3つの概念によって成り立っています。

• イベントターゲット（Event Target） … イベントが実際に発生したDOMオブジェクト。

• イベントバブリング（Event Bubbling） … 詳細は後述します。

• イベントキャプチャリング（Event Capturing） … 詳細は後述します。

イベントバブリングとは、ある要素が別の要素の中に入れ子になっており、両方の要素に同じ種類のイベント（クリックなど）に対するリスナーが登録されている場合の、イベントハンドラーが呼び出される順序のことです。バブリングでは、イベントはまず最も内側の要素で受け取られて処理され、その後、外側の要素へと順番に伝播していきます。

一方、キャプチャリングではこれとは逆に、イベントはまず最も外側の要素で受け取られ、内側の要素へと向かって伝播していきます。

ここからは、それぞれの挙動を具体例で確認していきましょう。以降の2つの例では、共通して次のHTMLを使用します。

検証用のHTML

<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>

赤い外側のdiv（id="outer"）の中に、黄色い内側のdiv（id="inner"）が入れ子になったシンプルな構造です。

イベントバブリングの例

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

addEventListener の第3引数を false にすると、リスナーはバブリングフェーズで呼び出されます。

実行結果

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

Inner div is clicked
Outer div is clicked

直接クリックされたのは内側のdivですが、イベントが内側から外側へと伝播（バブルアップ）するため、先に「Inner」のログが出力され、その後に「Outer」のログが出力されます。

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

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

第3引数を true にすると、リスナーはキャプチャリングフェーズで呼び出されます。

実行結果

同じく内側のdivをクリックすると、今度は逆の順序でログが出力されます。

Outer div is clicked
Inner div is clicked

イベントが外側の要素から内側の要素へと降りていくため、先に「Outer」のログが出力されます。

まとめ

イベントフローは「キャプチャリング → ターゲット → バブリング」という順序で進みます。addEventListener の第3引数（または { capture: true } オプション）によって、リスナーをどちらのフェーズで実行するかを選択できます。実際の開発では、バブリングを活用したイベントデリゲーションなどが頻繁に使われるため、この仕組みを正しく理解しておくことは非常に重要です。