さあ、「5 歳のように学べ」というのは単なるフレーズです。ここでおもちゃの物語を話しているわけではありません。しかし、最初から最後まで注意深く読んでいただければ、すべて意味が分かると約束します。

イベントのバブリングとキャプチャは、JavaScript でイベントがトリガーされたときにイベントが DOM (ドキュメント オブジェクト モデル) を介して伝播 (または移動) する方法の 2 つのフェーズです。さて、このステートメントでは、イベントの伝播の概念を明確にする必要があります。

イベントの伝播

div 内のボタンなどの要素でイベントが発生する場合、イベントはそのボタンだけで発生するわけではありません。イベントは、イベントの伝播として知られるプロセスで DOM 内を移動します。このプロセスは 2 つの主要なフェーズで発生します:

• イベント キャプチャ (「トリクリリング」とも呼ばれます)

• イベントバブリング

これで、アイデアが理解できたと思います。例を挙げて両方を理解しましょう。

イベントバブリング

イベント バブリングとは、要素でイベントが発生すると、まずその要素のイベント ハンドラーがトリガーされることを意味します。次に、DOM ツリー内を上に移動して、親要素のイベント ハンドラーをトリガーするなどして、ドキュメントまたは DOM ツリーのルートに到達します。

  Parent Div
  Click Me!

例の説明: ボタンをクリックすると、「ボタンがクリックされました!」と表示されます。イベントがボタンでトリガーされるため、アラートが最初に表示されます。その後、イベントが親 div まで「バブル」し、「Parent Div Clicked!」というメッセージが表示されます。警告。これは、イベントがボタンから始まり、その親 div まで進むためです。したがって、この伝播プロセスは「イベント バブリング」と呼ばれます。

イベントのキャプチャ

イベントのキャプチャはバブリングの逆です。イベントは Web ページの上部 (ドキュメントから始まる) から始まり、操作した要素に向かって下に移動します。これは、親要素のイベント ハンドラーが最初にトリガーされ、イベントはクリックまたは操作した子要素に移動することを意味します。

  Parent Div
  Click Me!

この場合、ボタンをクリックすると、「親 Div がクリックされました!」と表示されます。アラートが最初に表示されます。すると、「ボタンがクリックされました！」イベントがドキュメント レベルから開始され、最初に親 div までキャプチャ (少しずつ) され、その後ボタンに到達するため、アラートが表示されます。

addEventListener の 3 番目の引数の値 true は、キャプチャ フェーズの決定子です。

すべてのイベントは 3 つのフェーズを経ます

当然、すべてのイベントは 3 つのフェーズすべてを通過します:

• キャプチャ フェーズ: イベントは先頭 (ドキュメント) から始まり、ターゲットまで下に移動します。

• ターゲット フェーズ: イベントは、対話した要素 (ターゲット) に到達します。

• バブリング フェーズ: ターゲットに到達すると、イベントは親要素を介してバブリングして戻ります。

はい、イベントは自然に 3 つのフェーズすべてを通過しますが、JavaScript を使用すると、イベント リスナーがどのフェーズで動作するかを制御できます。

イベントは 3 つのフェーズすべてを通過しますが、JavaScript のイベント リスナーは デフォルトで バブリング フェーズにアタッチされます。これは、何も指定せずにイベント リスナーを追加すると、バブリング フェーズ (イベントがターゲットに到達して上昇を開始した後) でのみイベントをリッスンすることを意味します。

キャプチャ フェーズ中（DOM を通過するとき）にイベントをリッスンするように JavaScript に指示します。イベント は引き続きすべてのフェーズ (キャプチャ、ターゲット、バブリング) を通過しますが、リスナーはイベントがターゲット要素に到達する前の キャプチャ フェーズ 中にトリガーされます。 true を使用すると、イベントはキャプチャからバブリングに移行しますか?いいえ、イベント

はキャプチャとバブリングの両方を通過します。 true を渡すと、バブリングフェーズは妨げられません。リスナーにキャプチャ中に応答するように指示しているだけです。イベントは通常通り、ターゲットまでの捕獲、バブリングまで続きます。

：

• すべてのイベントは自然にキャプチャ、ターゲット、バブリングのフェーズを経ます

  .

• デフォルトでは、イベント リスナーはバブリング フェーズ中に動作します

  (イベントがターゲットに到達して上方に移動した後)。

true を渡すと、イベント リスナーに
• キャプチャ フェーズ中に

  (イベントが下方向に移動するとき) をトリガーするように指示します。

イベントは引き続きすべてのフェーズ (キャプチャ、ターゲット、バブリング) を通過しますが、どのフェーズで行動するかはリスナーが決定します。