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

JavaScriptのイベントバブリングとは？仕組みを実例つきでわかりやすく解説

イベントバブリングとは

イベントバブリングとは、イベントが発生した要素（ターゲット要素）から処理が開始され、DOM階層の上位にあたる親要素へと順番に伝わっていく仕組みのことです。JavaScriptにおけるイベント伝播の中でも最も基本的な概念の一つであり、これを理解することでイベントハンドラの予期しない発火などを防ぐことができます。

動作の流れを解説

以下の例では、3つの要素である div、span、button を使用します。

  • 階層構造を維持するために、button 要素を span 要素の中にネストし、さらに span 要素を div 要素の中に入れます。
  • すべての要素にクリックイベントを割り当て、いずれかの要素がクリックされた際に、それぞれ対応するメッセージを表示するアラートボックスが開くようにします。
  • プログラムを実行すると、画面には次の画像のような表示が現れます。
  • ある要素がクリックされると、その外側にある要素（親要素）にもイベントが自動的にバブルアップし、順に実行されます。
  • 例えば、最も内側にネストされた button 要素をクリックした場合、そのアラートボックスに加えて、span および div のアラートボックスも階層の順序に従って一つずつ開きます。
  • 同様に、span 要素をクリックした場合には、span のアラートボックスと、その親要素である div のアラートボックスが順番に表示されます。
  • このように、イベントが発生した要素から始まり、階層を遡って親要素へと伝わっていく一連のプロセスが「イベントバブリング」です。
  • イベントが発生した要素と、バブルアップによって到達した各要素のハンドラが、順番にすべて実行されます。

コード例

<html>
<head>
<style>
   .styleClass{
      display:table-cell;
      border:1px solid black;
      padding: 20px;
      text-align:center;
   }
</style>
</head>
<body>
   <div class = "styleClass" onclick = "alert('Div clicked')">Div element
   <span class = "styleClass" onclick ="alert('Span clicked')">span element
   <input type = "button" value = "click me" onclick="alert('Button clicked')">
</span>
</div>
</body>
</html>

このプログラムをコードエディタで実行すると、次のような画面が表示されます。

JavaScriptのイベントバブリングとは？仕組みを実例つきでわかりやすく解説

出力結果

上記の「click me」ボタン（button 要素）をクリックすると、まず次のアラートが表示されます。

JavaScriptのイベントバブリングとは？仕組みを実例つきでわかりやすく解説
この「OK」をクリックして閉じると、続いて「Span clicked」というメッセージのアラートボックスが表示されます。
JavaScriptのイベントバブリングとは？仕組みを実例つきでわかりやすく解説
さらにその「OK」をクリックすると、最後に「Div clicked」というメッセージのアラートボックスが表示されます。
JavaScriptのイベントバブリングとは？仕組みを実例つきでわかりやすく解説

補足：バブリングを止めたい場合

意図せず親要素までイベントが伝わってしまうのを防ぎたいときは、イベントオブジェクトの stopPropagation() メソッドを使用します。例えば event.stopPropagation() を呼び出すことで、イベントは現在の要素で止まり、それ以上親要素へ伝播しなくなります。モーダルやドロップダウンなど、クリック領域を厳密に分けたいUIを実装する際に非常に役立ちます。

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

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

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

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