38

私はjQueryが初めてで、キャプチャとバブリングの概念を理解しようとしています。

たくさんの記事を読みましたが、そのほとんどは Javascript のイベント伝搬について説明していました。

次の HTML コードがあるとします。

<div id="outer">
    outer
    <div id="inner">
        inner
    </div>
</div>

キャプチャは DOM 要素を下降するフェーズであり、バブリングは上昇するフェーズです。

Javascript では、どちらの方法に従うかを決定できます (true または false パラメーターを使用)。

element.addEventListener('click', doSomething, true) --> capture phase
element.addEventListener('click', doSomething, false) --> bubble phase

jQuery が JavaScript の方法以外に従う方法を示すのに似たものはありますか?

また、jQuery はデフォルト フェーズを使用しますか? 例えばバブル？

これをテストするために次のコードを使用したためです。

CSS

<style>
    div {
        border: 1px solid green;
        width: 200px;
    }
</style>

jQuery

<script>
    $(document).ready(function(){
        $('div').click(function(){
            $(this).animate({'width':'+=10px'},{duration: 3000})
        });
    });
</script>

外側の div をクリックすると、その div だけが大きな div にアニメーション化されるようです。内側の div をクリックすると、両方の div がより大きな div にアニメーション化されます。

私が間違っているかどうかはわかりませんが、このテストでは、既定のブラウザーの伝播方法がバブルであることが示されています。

私が間違っている場合は、私を修正してください。

4

5 に答える 5

0

すべてEventが最初に「キャプチャ」フェーズを通過し、次に「バブリング」フェーズを通過します。

たとえば、ユーザーが をクリックすると<a>、「capturing」( にaddEventListener設定されたメソッドの 3 番目の引数true、jQuery ではサポートされていない) を使用してバインドされたすべてのイベント ハンドラーが、最も外側から<html>リンクまで呼び出されます。次に、「バブリング」フェーズが開始され、「バブリング」(jQuery でサポート) を使用するすべてのイベント ハンドラーが逆の方法で呼び出されます。つまり、リンクから<html>.

開発者ツールでこのコードを実行し、サイトの任意の場所をクリックして、自分で試すことができます。

document.querySelectorAll("*").forEach(it => {
   it.addEventListener("click", function() {console.log("capturing: ", it)}, true); 
   it.addEventListener("click", function() {console.log("bubbling: ", it)}, false); 
});
于 2022-01-31T14:31:53.110 に答える