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

JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

イベントキャプチャ（Event Capturing）とは

イベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。

なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。

コードの解説

以下のサンプルコードでは、body内に3つのdiv要素を配置し、CSSを適用して入れ子構造（ネスト）にしています。

  • addEventListener()を使って、各divタグにイベントハンドラを登録します。
  • ここで登録するイベントは"click"イベントです。
  • addEventListener()メソッドは3つの引数を受け取ります。
  1. 第1引数：対象となるイベントの種類。ここでは"click"を指定します。
  2. 第2引数：アラートメッセージを表示するためのイベントハンドラ関数。
  3. 第3引数：フェーズ（useCapture）を指定する真偽値。trueを指定するとイベントキャプチャが有効になり、falseを指定するとイベントバブリングが有効になります。
  • アラートボックスを表示するためのイベントハンドラ関数では、getAttribute()を使ってクリックされたdiv要素のid値を取得しています。
  • 最も内側にあるdiv3をクリックした場合、イベントキャプチャが有効になっているため、アラートは最上位のdiv1から始まり、ターゲットであるdiv3まで順番に表示されます。
  • div2をクリックした場合も同様に、最上位のdiv1からターゲットのdiv2へとアラートボックスが順に表示されます。

サンプルコード

<html>
<head>
<style>
   .divstyle{
      display:table-cell;
      border: 2px solid black;
      padding: 20px;
      text-align: center;
   }
</style>
</head>
<body>
   <div id = "div1" class="divstyle">
   div1
   <div id = "div2" class="divstyle">
   div2
   <div id = "div3" class="divstyle">
   div3
<script>
   var divs = document.getElementsByTagName("div");
   for(var i = 0; i<divs.length; i++){
      divs[i].addEventListener("click",clickhandler,true );
   }
   function clickhandler() {
      alert(this.getAttribute("id") + "event got handled");
   }
</script>
</body>
</html>

上記のプログラムを実行すると、画面には次のように表示されます。

JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

この画面でdiv3（ターゲット要素）をクリックすると、以下のような出力が得られます。

実行結果

JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説
div1のアラートボックスでOKをクリックすると、次にdiv2のアラートボックスが開きます。

JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説
div2のアラートボックスでOKをクリックすると、続いてdiv3のアラートボックスが開きます。

JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

このように、第3引数をtrueに設定した場合、クリックされた要素ではなく最上位の親要素から順にイベントハンドラが実行されることが確認できます。これがイベントキャプチャの基本的な動作です。

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

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

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

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