ブラウザでのイベントフロー | イベントの発生タイミング | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

イベントフローとは？

JavaScriptのイベントフローは、ユーザーが操作（クリックやキー入力など）を行った際、イベントがどのようにブラウザ内で処理されるかを指します。イベントフローには「キャプチャリング」と「バブリング」という2つのフェーズがあり、イベントがどの順序で要素に伝わるかを制御できます。

キャプチャリングとバブリングの概要

キャプチャリングは、最外部の要素からターゲット要素に向かってイベントが伝達するフェーズです。一方、バブリングは、ターゲット要素から最外部の要素に向かってイベントが伝わるフェーズです。

document.querySelector("div").addEventListener("click", function(event) {
    console.log("Div clicked");
}, true); // trueはキャプチャリングフェーズで実行

document.querySelector("button").addEventListener("click", function(event) {
    console.log("Button clicked");
}, false); // falseはバブリングフェーズで実行

この例では、div要素がキャプチャリングフェーズでクリックされた際に処理が実行され、button要素がバブリングフェーズで処理されます。

イベントフローのフェーズ

イベントフローは以下の3つのフェーズで構成されています。

  • キャプチャリングフェーズ: 最外部の要素からターゲット要素へ向かってイベントが伝わる
  • ターゲットフェーズ: イベントがターゲット要素に到達し、処理される
  • バブリングフェーズ: ターゲット要素から最外部の要素に向かってイベントが伝わる

イベントフローの流れ

イベントがどの順序で伝達されるかを、以下の図で説明します。

フェーズ 説明
キャプチャリングフェーズ 最外部の要素からターゲット要素へ向かうフェーズ
ターゲットフェーズ ターゲット要素でイベントが処理されるフェーズ
バブリングフェーズ ターゲット要素から最外部の要素へ伝わるフェーズ

キャプチャリングフェーズの詳細

キャプチャリングフェーズでは、最外部の要素からイベントが内側に向かって伝わります。イベントリスナーをキャプチャリングフェーズで実行するには、addEventListenerメソッドの3番目の引数にtrueを指定します。

キャプチャリングフェーズの例

const div = document.querySelector("div");
const button = document.querySelector("button");

div.addEventListener("click", function(event) {
    console.log("Div clicked during capture phase");
}, true);

button.addEventListener("click", function(event) {
    console.log("Button clicked during capture phase");
}, true);

この例では、クリックイベントが外部のdiv要素からキャプチャリングフェーズで処理され、内部のbutton要素で処理されます。

バブリングフェーズの詳細

バブリングフェーズでは、ターゲット要素からイベントが外側に向かって伝わります。イベントリスナーをバブリングフェーズで実行するには、addEventListenerメソッドの3番目の引数にfalse（または省略）を指定します。

バブリングフェーズの例

const div = document.querySelector("div");
const button = document.querySelector("button");

div.addEventListener("click", function(event) {
    console.log("Div clicked during bubbling phase");
}, false);

button.addEventListener("click", function(event) {
    console.log("Button clicked during bubbling phase");
}, false);

この例では、バブリングフェーズでbutton要素のクリックイベントが処理され、その後div要素に伝わります。

イベントフローの管理

JavaScriptでは、stopPropagation()メソッドを使用して、イベントがバブリングまたはキャプチャリングフェーズで親要素に伝わるのを防ぐことができます。

イベントの伝播を停止する例

const button = document.querySelector("button");
const div = document.querySelector("div");

button.addEventListener("click", function(event) {
    console.log("Button clicked");
    event.stopPropagation();  // ここでイベントの伝播を停止
});

div.addEventListener("click", function(event) {
    console.log("Div clicked");
});

この例では、button要素がクリックされた後、stopPropagation()メソッドによりdiv要素へのイベントの伝播が停止されます。

まとめ

JavaScriptのイベントフローでは、キャプチャリングフェーズとバブリングフェーズを通じてイベントが伝達されます。キャプチャリングは外部から内側へ、バブリングは内側から外側へイベントが伝わる仕組みです。また、イベントの伝播を制御するためにstopPropagation()を使用してイベントフローを制御することができます。これらを理解することで、より高度なイベント管理が可能になります。

スポンサーリンク