イベントの順序
別の要素が1つの要素にネストされており、どちらがオンクリックイベントハンドラーがあるとします。ユーザーが要素2をクリックすると、要素1と要素2のクリックイベントがトリガーされます。しかし、最初にどのイベントがトリガーされますか？最初にどのイベントハンドラー機能が実行されますか？言い換えれば、イベントが発生する順序は何ですか？下の図に示すように、スパン要素領域がクリックされると、3つのクリックイベントがトリガーされますが、順序は何ですか？
<div onclick = "func1"> <p onclick = "func2"> <span onclick = "" func3> </span> </p> </div>
2つのモデル
NetscapeとMicrosoftには、このイベントを処理する2つのまったく異なる方法があります。
•Netscapeは、イベントが最も外側の層から最も特定の要素に発生することを提唱し、この一連のイベントはキャプチャタイプと呼ばれます
•Microsoftは、イベントを最も内側の要素から保持し、その後上方に広がります。この一連のイベントは、バブルタイプと呼ばれます
これらの2つのイベントの順序は完全に反対です。 Explorerブラウザは、Mozilla、Opera7、Konquerorの両方のバブルイベントのみをサポートしています。古いオペラとICABはどちらもサポートしていません
W3C
W3Cイベントモデルで発生するイベントは、ターゲット要素に到達してからバブルステージに入るまで、最初にキャプチャステージに入ります。
通常のWeb開発の場合、キャプチャステージまたはバブルステージでイベントハンドラー機能をバインドするかどうかを選択できます。これは、AddEventListener（）メソッドを介して達成されます。この関数のUseCaptureパラメーターがtrueである場合、関数はキャプチャ段階に結合され、その逆も同様です。この関数はバブル段階にバインドされます。
Element.AddeventListener（イベント、機能、UseCapture）
泡を止めます
通常の開発中に、イベントの拡散を防ぎたい場合は、1つの方法でそれを行うことができます。
Microsoftのモデルでは、イベントのCancelBubbleプロパティをTrueに設定する必要があります
window.event.cancelbubble = true
W3Cモデルでは、イベントのStopPropagation（）メソッドを呼び出す必要があります
e.StopPropagation（）
これらの方法を呼び出すと、すべての泡が外側に広がるのを防ぎます。クロスブラウザーソリューション：
function dosomething（e）{if（！e）{var e = window.event; e.cancelbubble = true; } if（e.StopPropagation）{e.StopPropagation（）; }}上記の記事は、イベントの泡とイベントキャプチャの詳細な理解は、私があなたと共有したすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。