js_javascript スキルにおけるイベント バブリングとイベント キャプチャの詳細な紹介

(1) バブル型イベント: イベントは、最も具体的なイベント ターゲットから最も具体性の低いイベント ターゲット (ドキュメント オブジェクト) までの順序でトリガーされます。

IE 5.5: div -> 本文 -> ドキュメント

IE 6.0: div -> 本文 -> ドキュメント

Mozilla 1.0: div -> 本文 -> ドキュメント -> ウィンドウ

(2) イベントのキャプチャ (イベント キャプチャ): イベントは最も精度の低いオブジェクト (ドキュメント オブジェクト) から開始され、次に最も正確なオブジェクトにトリガーされます (イベントはウィンドウ レベルでキャプチャすることもできますが、具体的に指定する必要があります)開発者による）。

(3) DOM イベント フロー: キャプチャ イベントとバブリング イベントという 2 つのイベント モデルを同時にサポートしますが、キャプチャ イベントが最初に発生します。どちらのイベント ストリームも、ドキュメント オブジェクトから始まりドキュメント オブジェクトで終わる、DOM 内のすべてのオブジェクトに影響します。

DOM イベント モデルの最もユニークな特性は、テキスト ノードも (IE ではなく) イベントをトリガーすることです。

W3C 標準をサポートするブラウザは、イベントを追加するときに addEventListener(event,fn,useCapture) メソッドを使用します。ベースの 3 番目のパラメーター useCapture は、イベントがイベント キャプチャ中に実行されるか、または実行されるかを設定するために使用されます。イベント発生時 ソーク時に実行されます。 W3C (IE) と互換性のないブラウザでは、attachEvent() メソッドが使用されます。ただし、IE のイベント モデルは、イベントが発生したとき、つまり useCapture が false に等しいときにデフォルトで実行されます。イベントを処理するときは useCapture を false に設定する方が安全であり、ブラウザーの互換性も実現します。

イベントキャプチャフェーズ: イベントは最上位のラベルから開始され、イベントターゲット (ターゲット) がキャプチャされるまで下方向に検索されます。
イベント バブリング ステージ: イベントはイベント ターゲット (ターゲット) から開始され、ページの最上位ラベルまでバブリングします。

下位要素 p を持つ要素 div を想定します。

要素

ユーザーが p をクリックすると、両方の要素がクリック イベントにバインドされます。 div と p の両方でトリガーされるので、2 つのイベント ハンドラーのうちどちらが最初に実行されるでしょうか?一連の出来事は何ですか?

2 つのモデル
以前は、Netscape と Microsoft は異なる実装でした。

Netscape では、最初に div がトリガーされます。これはイベント キャプチャと呼ばれます。

Microsoft では、最初に p がトリガーされます。これはイベント バブリングと呼ばれます。

2 つのイベントの処理順序はまったく逆です。 IE はイベント バブリングのみをサポートします。Mozilla、Opera 7、Konqueror はすべて、Opera の古いバージョンと iCab ではサポートされていません。

イベント キャプチャ
イベント キャプチャを使用すると、親要素が最初にトリガーされ、子要素が後でトリガーされます。つまり、div が最初にトリガーされ、p が後でトリガーされます。

イベント バブリング
イベント バブリングを使用すると、子要素が最初にトリガーされ、次に親要素、つまり p が最初にトリガーされ、次に div がトリガーされます。

W3C モデル
W3C モデルでは、イベントが発生すると、イベント トリガーがイベント ソース要素に到達するまで、最上位からイベント キャプチャが開始されます。その後、イベントはドキュメントに到達するまでイベント ソースから発生します。

プログラマは、イベントをバインドするときにイベント キャプチャを使用するかイベント バブリングを使用するかを選択できます。このメソッドには 3 つのパラメータがあり、3 番目のパラメータが true の場合、イベント キャプチャが使用されます。これは false です。イベント バブリングを使用することを意味します。

ele.addEventListener('click',doSomething2,true)

true=キャプチャ

false=バブル

従来のバインディングイベントメソッド
W3C DOM をサポートするブラウザでは、このような一般的なイベントバインディングメソッドはイベントバブリングメソッドです。

ele.onclick = doSomething2

IE ブラウザ
上で述べたように、IE はイベント バブリングのみをサポートし、イベント キャプチャをサポートしません。また、バブリングまたはバブリングを示す 3 番目のパラメータを使用しません。キャプチャでは、別の関数attachEventが提供されます。

ele.attachEvent("onclick", doSomething2);

添付ファイル: イベント バブリング (プロセス): イベントはターゲット (event.srcElement||event.target) から開始され、ドキュメントに到達するまでドキュメントに沿ってレイヤーごとにバブルアップします。

イベントの伝播は次のように停止できます。
• W3c では、stopPropagation() メソッドを使用します。
• stopPropagation 後、IE で cancelBubble = true を設定します。 ();、その後のバブリングプロセスは発生しません~
3. クリック後のジャンプなどのイベントのデフォルト動作を防止します~
• W3c では、preventDefault() メソッドを使用します。 🎜>• IE で window.event.returnValue = false を設定します。
4. テスト中に、すべてのイベントをバブルできるわけではありません。 (これは他の人の記事から引用したものであり、私はテストしていません)。