web-dev-qa-db-ja.com

jQueryを使用したキャプチャとバブリング

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

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

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

<div id="outter">

        outter

        <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にアニメーション化します。

私が間違っているかどうかはわかりませんが、このテストでは、デフォルトのブラウザ伝播方法がバブルであることを示しています。

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

javascriptjqueryhtmlevent-bubblingpropagation
24
christostsang

jQueryはイベントバブリングのみを使用します。キャプチャモデルを使用するイベントハンドラーを追加する場合は、addEventListenerを使用して明示的に行う必要があります。3番目の引数trueを質問に示します。

40
Barmar

最も内側の要素から最も外側の要素まで実行を開始するイベントバブリング。

外側の要素から最も内側の要素まで実行を開始するイベントキャプチャ。

ただし、jQueryはイベントバブリングを使用します。イベントキャプチャは次の方法で実現できます。

$("body")[0].addEventListener('click', callback, true);

AddEventListenerの3番目のパラメーターは、イベントバブリングを行うかイベントキャプチャを行うかをブラウザーに指示します。

デフォルトではfalseです。

Falseの場合、イベントバブリングが発生します。それが真である場合、イベントのキャプチャが必要になります。

3
Vijay Ramesh