DOM イベントの 3 段階について flow_html/css_WEB-ITnose

一丶流

流れとは何ですか?

たとえば、react の単一アイテムのデータ フロー、Node.js のフロー、またはこの記事の DOM イベント フローはすべてフローの具体化です。技術的に言えば、ストリームはプログラムによって入力または出力される連続したバイトのシーケンスであり、一般的に言えば、ストリームは方向性のあるデータです。 2丶 イベントの流れ

イベントの流れとは何ですか？

一連の同心円があると想像してください。最も内側の円の中心に指を置くと同時に、外側の層にある他の同心円も指しています。最も内側の円が DOM 内のボタンであると仮定します。つまり、ボタン要素をクリックすると、その親要素もすべてクリックされます。では、DOM はこのクリック イベントをどのように処理するのでしょうか?実際、このクリック イベントは、クリックされた要素で 1 回だけ発生するわけではありません。それでは、誰が最初に通知を受け取り、クリック イベントに応答するのでしょうか?

イベント キャプチャ

イベント キャプチャは、クリックされた要素の親要素が最初にイベントを受け取り、下方に伝播する必要があることを意味します。例のボタン クリック イベントと同様に、イベントを受け取る要素の順序はウィンドウ > ドキュメント > である必要があります。 ; 本体 > ボタン。

イベントのバブリング

イベントのバブリングは、クリックされた特定の要素が最初にイベントを受け取ると考えられます。

イベント フェーズ

DOM イベントが発生すると、次の 3 つのフェーズが実行されます。

1. ドキュメントのルート ノードからターゲット オブジェクトへのフロー。

2.ターゲット オブジェクト ---> ターゲット ステージ

3. ドキュメントのルート ノードに戻ります --->

三丶 Egg の使用

イベント リスニング (addEventListener(type, callback, true)) を通じて親要素でイベントをキャプチャすると、イベント バブリング (stopPropergation()) によって引き起こされる問題を防ぐことができます。