JavaScriptイベントバブリングキャプチャとイベント伝播防止サンプルコードの詳細説明

1. イベントバブリングとは何ですか?

ソートアルゴリズムでは、いわゆるバブリングとは、根底にあるものを表面化させることを学びました。

イベントが何であるかを説明するための例を見てみましょう。 .バブル。

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

イベントバブリングがサポートされている場合、「テスト」ボタンをクリックすると、最初に実行されるのはalert("button")です。名前の意味は次のとおりです。

イベントは最も具体的なイベントから順序付けされます。 target to 最も具体性の低いイベント ターゲット (ドキュメント オブジェクト) が順番にトリガーされます。

p、button、html のルート要素すべてにイベントがある場合、イベントの実行順序は次のとおりです:

button->p->html

2. イベント キャプチャとは何ですか?

もう一度イベント キャプチャを見てみましょう。イベント キャプチャと比較すると、処理時間の順序はイベント バブリングとまったく逆になります。

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

このコードが実行されると、alert("p") がトリガーされます。最初にalert("p")がトリガーされます("button")。イベント キャプチャの概念を明確にします。

イベントは、最も精度の低いオブジェクト (ドキュメント オブジェクト) からトリガーされ、次に最も正確なオブジェクトにトリガーされます。

同様に、button、p、html 要素にバインドされたイベントがある場合、イベントの実行順序は次のようになります:

html->p->button

3 さまざまなバージョンのブラウザによるイベント処理。機構？

(1) DOM では、イベントのバブリングとイベントのキャプチャの両方をサポートしています。W3C 標準では、すべてのイベントはイベントのキャプチャから始まり、最終ノードを見つけてからルート ノードにバブリングすると考えられます。

DOM でイベント バインディングをサポートする関数は次のとおりです:

addEventListener("事件名"，函数，userCapture);

userCapture パラメーターのデフォルトは false で、イベント バブリングがサポートされます。
userCapture パラメータが true の場合、イベント キャプチャがサポートされます。

(2) 多くのブラウザでは addEventListener メソッドがサポートされていますが、IE ではサポートされていません。

(3) IE のイベント処理機構はイベントバブリングのみをサポートしています

attachEvent メソッドには 2 つのパラメータがあります。事件の広がり？

イベントバブリングとイベントキャプチャの両方をブロックできます。

(1) まず、W3C でイベントの伝播を防ぐ方法は次のとおりです: IE では

attachEvent("事件名"，"函数名")

cancelBubble=true;

以上がJavaScriptイベントバブリングキャプチャとイベント伝播防止サンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。