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

1. ボタン要素のイベント ハンドラ
2. 子要素のイベント ハンドラ
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 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

1. 親要素のイベント ハンドラ
2. 子要素のイベント ハンドラ
3. ボタン要素のイベント ハンドラ

開発者は、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

1. 親要素のイベント ハンドラ
2. 子要素のイベント ハンドラ

結論として、動的でインタラクティブな Web ページを開発するには、イベントとイベントの伝播を理解することが重要です。開発者は、イベント リスナーを使用してイベントの伝播を制御することにより、意味のある方法でユーザー アクションに応答するリッチなユーザー エクスペリエンスを作成できます。