DOM での JavaScript イベントと伝播について

JavaScript イベントは、動的なユーザー操作を可能にする Web 開発の重要な側面です。イベントは、ボタンのクリック、要素の上へのカーソルの移動、キーの押下など、Web ページで発生するアクションです。これらのアクションに応答して、JavaScript は、コンテンツの表示や要素の外観の変更など、特定の機能を実行できます。

イベントの最も一般的な例の 1 つは、クリックイベントです。ユーザーが要素をクリックすると、クリックイベントがトリガーされます。開発者は、イベントリスナーを使用してこのイベントをリッスンし、それに応じてコードを実行できます。同様に、要素の上にカーソルを置くと、ホバーイベントがトリガーされ、追加情報を表示したり、要素の外観を変更したりするために使用できます。

イベントの伝播

イベント自体を理解するだけでなく、イベントの伝播を理解することも重要です。伝播とは、Web ページ上の要素を表す階層構造である Document Object Model (DOM) ツリーをイベントが移動する方法を指します。イベントは、最も内側の要素 (イベントがトリガーされた場所) から最も外側の要素 (ツリーのルート) に、またはその逆に伝達されます。

一般に、イベントフロープロセスは、イベントのキャプチャ、イベントのターゲット、イベントのバブリングの 3 つの手順で完了します。

イベントバブリング

バブリングはデフォルトの動作であり、イベントは最初に最も内側の要素でトリガーされ、次にツリーのルートに到達するまで親要素を通って外側に移動します。


<div id="parent">
  <div id="child">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  const btn = document.getElementById('btn');

  parent.addEventListener('click', () => {
    console.log('Event bubbled from parent element');
  });

  child.addEventListener('click', () => {
    console.log('Event bubbled from child element');
  });

  btn.addEventListener('click', () => {
    console.log('Event bubbled from button element');
  });
</script>

//Output
//Event bubbled from button element
//Event bubbled from child element
//Event bubbled from parent element

ボタン要素のイベントハンドラ
子要素のイベントハンドラ
親要素のイベントハンドラ

キャプチャは逆で、イベントは最初に最も外側の要素でトリガーされ、次に子要素を通って内側に移動し、最も内側の要素に到達します。

<div id="parent">
  <div id="child">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  const btn = document.getElementById('btn');

  parent.addEventListener('click', () => {
    console.log('Event captured at parent element');
  }, true);

  child.addEventListener('click', () => {
    console.log('Event captured at child element');
  }, true);

  btn.addEventListener('click', () => {
    console.log('Event captured at button element');
  }, true);
</script>

//Output
//Event captured at parent element
//Event captured at child element
//Event captured at button element

親要素のイベントハンドラ
子要素のイベントハンドラ
ボタン要素のイベントハンドラ

開発者は、stopPropagation() メソッドを使用してイベントの伝播を制御できます。このメソッドは、イベントがキャプチャおよびバブリングフェーズで DOM を介してさらに伝播するのを停止し、開発者がイベントのスコープを特定の要素に制限できるようにします。ただし、デフォルトの動作が発生するのを防ぐことはできません。

<div id="parent">
  <div id="child">
    <button id="btn">Click Me</button>
  </div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  const btn = document.getElementById('btn');

  parent.addEventListener('click', (event) => {
    console.log('Event captured at parent element');
  }, true);

  child.addEventListener('click', (event) => {
    console.log('Event captured at child element');
    event.stopPropagation(); // stop event propagation
  }, true);

  btn.addEventListener('click', (event) => {
    console.log('Event captured at button element');
  }, true);
</script>

//Output
//Event captured at parent element
//Event captured at child element