JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのイベントバブリングとイベントキャプチャの違いを徹底解説

JavaScriptでは、DOM要素上で発生したイベントは特定の順序に従って伝播します。この伝播の仕組みには「イベントバブリング（Event Bubbling）」と「イベントキャプチャ（Event Capturing）」という2つの方式があります。本記事では、それぞれの特徴と違いを、実際に動かせるサンプルコードを交えてわかりやすく解説します。

イベントバブリングとは

イベントバブリングとは、ある要素でイベントが発生したとき、まずその要素自身に登録されたイベントハンドラが実行され、その後親要素へ、さらにはすべての祖先要素へと下から上へ（子 → 親）と伝わっていく仕組みです。

イベントキャプチャとは

イベントキャプチャは、イベントバブリングとは逆の動作をする伝播方式です。イベントは最上位の親要素から開始され、ターゲットとなる子要素へ向かって上から下へ（親 → 子）と伝わっていきます。

なお、addEventListener() の第3引数に true を指定するとキャプチャフェーズで、false（デフォルト）または省略した場合はバブリングフェーズでハンドラが実行されます。

以下は、JavaScriptにおけるイベントバブリングとイベントキャプチャの挙動の違いを比較できるサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: blueviolet;
    }
    .outer {
        display: inline-block;
        width: 400px;
        height: 200px;
        font-size: 20px;
        background-color: chartreuse;
    }
    .inner {
        width: 200px;
        height: 100px;
        font-size: 20px;
        background-color: blueviolet;
        text-align: center;
        margin: 20px;
    }
    .tags {
        display: inline-block;
        width: 400px;
        font-weight: bold;
        font-size: 18px;
    }
</style>
</head>
<body>
<h1>Event bubbling vs event capturing</h1>
<div class="outer">
OUTER
<div class="inner">INNER</div>
</div>
<div class="outer">
OUTER
<div class="inner">INNER</div>
</div>
<br />
<div class="tags">Bubbling</div>
<div class="tags">Capturing</div>
<div class="result"></div>
<script>
    let outerDiv = document.querySelectorAll(".outer");
    let innerDiv = document.querySelectorAll(".inner");
    let resEle = document.querySelector(".result");
    outerDiv[0].addEventListener("click", () => {
        resEle.innerHTML += "Outer div has been clicked" + "<br>";
    });
    innerDiv[0].addEventListener("click", () => {
        resEle.innerHTML = "";
        resEle.innerHTML += "Inner div has been clicked" + "<br>";
    });
    outerDiv[1].addEventListener("click",() => {
        resEle.innerHTML = "";
        resEle.innerHTML += "Outer div has been clicked" + "<br>";
    },true);
    innerDiv[1].addEventListener("click",() => {
        resEle.innerHTML += "Inner div has been clicked" + "<br>";
    }, true);
</script>
</body>
</html>

実行結果

JavaScriptのイベントバブリングとイベントキャプチャの違いを徹底解説

左側（バブリング）の内側のdivをクリックした場合は、まず「Inner div has been clicked」が表示され、その後に「Outer div has been clicked」が続いて表示されます。これはイベントが子から親へ伝播していることを示しています。

JavaScriptのイベントバブリングとイベントキャプチャの違いを徹底解説

一方、右側（キャプチャ）の内側のdivをクリックした場合は、先に「Outer div has been clicked」が表示され、その後に「Inner div has been clicked」が表示されます。こちらはイベントが親から子へ伝播していることを示しています。

JavaScriptのイベントバブリングとイベントキャプチャの違いを徹底解説

まとめ

イベントバブリングとイベントキャプチャは、DOMツリー上でイベントが伝わる方向が逆になるという点が最大の違いです。デフォルトではバブリングが使われますが、addEventListener() の第3引数を活用することで伝播のタイミングを制御できます。この仕組みを理解しておくと、イベント委譲（Event Delegation）などの実践的なテクニックにも応用できます。

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

    JavaScriptでイベント処理を扱う際、イベントバブリングとイベントキャプチャリングという2つの重要な概念を理解しておくことは不可欠です。これらは、ネストされた要素に対してイベントリスナーが登録されている場合に、イベントハンドラが呼び出される順序を決定する仕組みです。 イベントバブリングとは？ イベントバブリングとは、ある要素が別の要素の中にネストされていて、両方の要素が同じ種類のイベント（例：クリック）に対するリスナーを登録している場合に、イベントがまず最も内側の要素で捕捉・処理され、その後外側の要素へと伝播していく動作のことです。 イメージとしては、水中で泡（バブル）が下から上へ浮か

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

    JavaScriptにおけるイベントフローは、主に次の3つの概念によって成り立っています。イベントターゲット（Event Target） … イベントが実際に発生したDOMオブジェクト。イベントバブリング（Event Bubbling） … 詳細は後述します。イベントキャプチャリング（Event Capturing） … 詳細は後述します。イベントバブリングとは、ある要素が別の要素の中に入れ子になっており、両方の要素に同じ種類のイベント（クリックなど）に対するリスナーが登録されている場合の、イベントハンドラーが呼び出される順序のことです。バブリングでは、イベントはまず最も内側の要素で受け取られ