イベントのバブリングとキャプチャ: DOM でのイベントの伝播はどのように機能しますか?

イベントのバブリングとキャプチャについて

HTML DOM イベントでは、別の要素内の要素がイベントをトリガーすると、イベントは要素の階層。選択したイベント伝播モードに応じて、要素がイベントを受信する順序が変わります。

イベント バブリング

イベント バブリングでは、イベントは最初にキャプチャされ、次によって処理されます。最も内側の要素で、DOM 階層を「上」に移動します。その結果、イベント ターゲット要素は最初にイベントを処理し、次にその親が処理されます。

イベント キャプチャ

対照的に、イベント キャプチャでは、イベントは最初に最も外側の要素によってキャプチャされ、階層を介して「下方向」に伝播します。したがって、ルート要素は子要素の前にイベントを処理します。

バブリングとキャプチャの選択

イベントのバブリングとキャプチャの選択は、必要なイベント処理動作によって異なります。 .

• イベントが発生する必要がある場合は、バブリングを使用します。複数の要素によって処理され、処理の順序は重要ではありません。イベント処理を親要素に委任する場合にも役立ちます。
• イベントがターゲット要素に到達する前に介入する必要がある場合は、キャプチャを使用します。これは、デフォルトの動作を防止したり、さまざまな要素タイプ間でイベントを一貫して処理したりするためによく使用されます。

例

HTML 構造内:

<div>