📘

DOMの構造とイベント伝搬の仕組みを理解する

に公開
HTML
JavaScript
DOM
zennfes2025free
tech

Web開発において、DOM（Document Object Model）は避けて通れない基礎概念です。
特に「イベント伝搬（Event Propagation）」の理解は、クリックや入力などのユーザー操作を正しく扱うために欠かせません。
この記事では、復習も兼ねてDOMの構造からイベントの流れまでを体系的に整理します。

1. DOMとは

DOM（Document Object Model）は、ブラウザがHTML文書を解析して作り上げるツリー構造のオブジェクト表現です。
HTMLの各要素は「ノード」としてツリー上に配置され、JavaScriptからアクセス・操作できます。
HTMLとjsの共通言語のようなものです。

たとえば、次のようなHTMLがあります。

<div>
  <ul>
    <li><button>クリック</button></li>
  </ul>
</div>

ブラウザはこれを次のようなDOMツリーに変換します。

Document
└─ <html>
   └─ <body>
      └─ <div>
         └─ <ul>
            └─ <li>
               └─ <button>

このようにDOMは階層構造を持ち、各要素が親子関係でつながっています。
JavaScriptでは document.querySelector()などを使って要素を取得し、textContent や style などのプロパティを操作できます。

2. イベントとは

イベントとは、ユーザーの操作やブラウザの状態変化を示す通知の仕組みです。
クリック、キーボード入力、フォーム送信、スクロールなど、あらゆる操作がイベントとして扱われます。

JavaScriptでは、要素に対してイベントリスナーを登録することで、特定の操作に応じた処理を実行できます。

button.addEventListener('click', () => {
  console.log('ボタンクリック');
});

3. イベント伝搬の3つのフェーズ

イベントは、DOMツリーをたどりながら 3つの段階（フェーズ） を経て伝わります。

  1. キャプチャリングフェーズ（Capturing phase）
    親要素からターゲット要素へ向かってイベントが「降りていく」段階です。
    この段階でリスナーを反応させるには、addEventListener の第3引数で { capture: true } を指定します。
div.addEventListener('click', handler, { capture: true });

  1. ターゲットフェーズ（Target phase）
    イベントが実際の対象要素（クリックされた要素など）に到達する段階です。
    このとき、対象要素に登録されたリスナーが呼び出されます。

  2. バブリングフェーズ（Bubbling phase）
    イベントがターゲットから親要素へ向かって「上へ戻る」段階です。
    通常のイベントリスナー（{ capture: false } または省略）はこの段階で実行されます。

div.addEventListener('click', handler);

まとめると

  1. イベントはまず上から下へ（キャプチャリング）
  2. 目的の要素で発火（ターゲット）
  3. その後、下から上へ戻る（バブリング）

という3段階で進行します。

4. イベント制御のメソッド

イベント伝搬は以下のメソッドで制御できます。

  • event.stopPropagation()
    現在の要素より上位へイベントが伝わるのを止めます。

  • event.stopImmediatePropagation()
    同じ要素内の他のリスナーも含めて、すべての後続処理を止めます。

  • event.preventDefault()
    ブラウザが持つ既定の動作（例：リンクの遷移やフォーム送信）を止めます。

5. イベント委任（Event Delegation）

多くの子要素に個別にイベントを設定すると、非効率で管理も煩雑になります。
そのため、親要素にまとめてイベントを登録し、バブリングを利用して子要素を判定する手法がよく使われます。

document.querySelector('ul').addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    console.log('ボタンがクリックされました');
  }
});

このように「バブリング」を活かすと、動的に追加される要素にも対応でき、パフォーマンスも良くなります。

6. 学習におすすめのリソース

より深く理解するために、以下の公式・実践的な資料を参照するのがおすすめです。

まとめ

  • DOMはHTML文書をツリー構造で表したオブジェクトモデルです。
  • イベントは「キャプチャリング → ターゲット → バブリング」という順で伝搬します。
  • capture オプションでキャプチャ側、通常の設定でバブリング側に反応します。
  • stopPropagation() などを使ってイベントの流れを制御できます。
  • バブリングを活用した「イベント委任」は、効率的な実装の基本です。

Discussion