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

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

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

イベント バブリング

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

イベント キャプチャ

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

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

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

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

例

HTML 構造内:

<div>

でクリック イベントが発生した場合、要素では、次のことが発生します:

• バブリング: li ->ウル -> div
• キャプチャ中: div ->ウル -> li

注:

• イベント キャプチャはかつて Netscape のみでサポートされていましたが、バブリングは Microsoft によって好まれていました。現在、両方とも W3C によって標準化されています。
• イベントのバブリングは、複雑な DOM 構造のキャプチャと比較して、パフォーマンスにわずかなオーバーヘッドがある可能性があります。
• イベント ハンドラは、addEventListener を使用してバブリングまたはキャプチャのいずれかに登録できます。オプションの useCapture パラメータを使用したメソッド。

以上がイベントのバブリングとキャプチャ: DOM でのイベントの伝播はどのように機能しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。