6

Dom レベル 2 のイベント モデルには、イベント キャプチャとイベント バブルが存在することはわかっています。しかし、jqueryがそれらをどのように処理するかわかりません。そこで、その.bind方法でいくつかの実験を行いました。これが私のコードです。確認してください。

<script>
    $(function() {
        $('*').each(function(){
            var current = this;
            $(this).bind("dblclick",function(event){console.log('Capture for ' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id);});

        });
    });
</script>
<body id="greatgrandpa">
    <div id="grandpa">
        <div id="pops">
            <img id="example" src="designer/templates/thumbnails/2ColsTemplate.PNG" />
        </div>
    </div>
</body>

出力は以下のようになります

Capture for IMG#example target is example
Capture for DIV#pops target is example
Capture for DIV#grandpa target is example
Capture for BODY#greatgrandpa target is example
Capture for HTML# target is example

event.stopPropagation();イベントハンドラーを使用すると、イベントのバブルが停止しdblclickます。

しかし、それには 2 つの質問があります。ログの書き込み順序によると、bindメソッドは、イベント キャプチャ (ドームの上部から下部) ではなく、イベント バブル (ドームの下部から上部) でイベントをトリガーすると推測しました。もう 1 つの質問は、イベント キャプチャ期間にイベントがトリガーされる可能性はありますか? ありがとう。

ありがとう。

4

2 に答える 2

11

jQuery はイベント バブリング フェーズのみをサポートし、イベント キャプチャ フェーズはサポートしません。IE は長い間キャプチャをサポートしていなかったからです。あなたのコードがあなたに示しているのは、キャプチャではなくバブリングです。

キャプチャはdocument、イベントが発生した要素に下から移動します。次に、要素でバブリングが始まり、document再びバブリングします。これが、表示した順序でイベントが表示される理由です (これがバブリング フェーズです)。

于 2013-03-18T08:23:14.783 に答える
0

前の答えは正しいです。ただし、簡単な回避策があります。同じ効果的な結果を得るには、伝播を停止してイベントのバブリングを終了し、ターゲットの親でイベントをトリガーしてから、目的のコードを実行して、親オブジェクトのイベントに続いてイベントが発生するようにします。

あなたの例では、ハンドラの実行を効果的に反転させたい場合:

    $('*').each(function(){
        var current = this;
        $(this).bind("dblclick",function(event){

               // stop the event propagation
               event.stopPropagation();

               // execute allow the event to be executed on parent objects
               var parent = $(event.target).parent(); 
               if(parent) {  
                   parent.dblclick(); 
               }


               console.log('Capture for ' + current.tagName + '#'+ current.id +
                ' target is ' + event.target.id);});

    });

この方法論の欠点の 1 つは、親要素がキャプチャ イベント ハンドラーで定義されている場合、キャプチャは既に発生しており、親でイベントを呼び出すとキャプチャ ハンドラーが再実行されることです。したがって、これは、ターゲットのすべての親要素で宣言されたイベントを認識または制御している場合にのみ使用する必要があります。

于 2014-07-25T16:34:32.533 に答える