4

重複の可能性：
イベントのバブリングとキャプチャとは

JSには、キャプチャとバブルの2つのイベントタイプがあることを知りました。eventListenerバブルは、すべての子供に取り付ける必要性を回避するために使用できます。代わりに、リスナーを親にのみ接続し、ターゲットをチェックさせます。かっこいいですね。そして、私はこの例を試しました：

<div id="parent-list">
    <span>span1</span>
    <span class='target'>span2</span>
    <span>span3</span>
    <span>span4</span>
</div>

<script type="text/javascript">
document.getElementById('parent-list').addEventListener('click',function(e){
    if( e.target && e.target.nodeName=='SPAN' ){
        var classes = e.target.className.split(' ');
        for(var i=0; i<classes.length; ++i){
            if( classes[i]=='target' ){
                alert('Bingo! you hit the target.');
            }
        }
    }
});
</script>

しかし、私は子スパンにリスナーをアタッチしていません。それでも、それらのイベントは泡立っています！では、JSのデフォルトのイベント順序をバブリングしていますか？では、どのシナリオでキャプチャ（トップダウン）が使用されますか？

4

2 に答える 2

4

次のような html があるとします。

<div id="grandparent">
    <div id="parent">
        <button id="target"></button>
    </div>
</div>

そして、次のようなJS：

function sayGrandpa (evt) { console.log("Grandpa"); }
function sayClicked (evt) { console.log("Clicked"); }

var grandparent = document.getElementById("grandparent"),
    target = document.getElementById("target");

grandparent.addEventListener("click", sayGrandpa, false);
target.addEventListener("click", sayClicked, false);

バブリングとキャプチャは、実際にはあなたが想定していることとは何の関係もありません。どちらの場合も (W3C 準拠のブラウザーで)、イベント リスナーを使用して親にアタッチし、トリガーされるイベントをリッスンできます。子供。

違いは、バブリングでは、一連のイベントがターゲットから始まり、爆弾が爆心地で爆発し、外側に波打つ衝撃波を送るように、一連の親のチェーンを通って戻ることを前提としていることです。

キャプチャは からwindow(または から<html>) 開始され、ターゲット要素まで下がります。

したがって、バブリング (波紋に似ています) を使用すると、要素に直接設定された関数が最初に発生し、先祖に関連付けられた委任された関数は、波紋がチェーンに戻るときに発生します。

キャプチャを使用すると、祖先に関連付けられたすべての委任された関数は、要素でイベントが発生する前に発生します。
そのため、grandparent要素はクリックを事前に認識していますtarget。

したがって、物事がどのような順序で発生するかを尋ねると、物事は非常に明白です。

grandparentがキャプチャされるイベントを設定し、バブルが発生する 2 番目のイベントを設定し、いずれかでgrandparentあるイベントを設定すると、順序は次のようになります。target

captured grandparent target bubbled grandparent

では、実際にクリックされるボタンの前にクリックが発生したことを祖先に知らせることが有益なのはどのような場合でしょうか?
素晴らしい質問です！

クリックするはずのものを隠すことで人々を惨めにする、本当におかしな方法ではない何かを誰かが思い付くことができると確信しています.

しかし、道徳的には、明示的に要求する必要があるということです ( の 3 番目のパラメーターを.addEventListenerに設定しますtrue)。
また、oldIE などはキャプチャを一切サポートしていません。

これは、一般的に使用する必要があるものではありません。

于 2012-11-06T22:11:56.127 に答える
2

デフォルトのイベント順序はブラウザ固有です。

イベント キャプチャ:外側の要素のイベント ハンドラが最初に起動し、内側の要素のイベント ハンドラが最後に起動します。

イベント バブリング:内側の要素のイベント ハンドラーが最初に起動し、外側の要素のイベント ハンドラーが最後に起動します。

2 つのイベント順序は根本的に反対です。Explorer は、イベント バブリングのみをサポートします。Mozilla、Opera 7、Konqueror は両方をサポートしています。古い Opera と iCab はどちらもサポートしていません。

cancelBubbleMicrosoft モデルでは、イベントのプロパティを true に設定する必要があります。

window.event.cancelBubble = true

stopPropagation()W3C モデルでは、イベントのメソッドを呼び出す必要があります。

e.stopPropagation()

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

http://www.quirksmode.org/js/events_order.html

于 2012-11-06T21:12:15.893 に答える