7

私は最近、javascript を使用して、DOM イベントでのバブリングとキャプチャーの違いを発見しました。これで、それがどのように機能するのか理解できましたが、奇妙な状況を見つけたので、なぜそうなったのか知りたいです。

Quirks モードによると、イベントの伝播は外側の div でのキャプチャから始まり、下部に到達してから上部にバブルアップします。問題は、私がいくつかのテストを始めたときでした。

この最初のものでは、すべてが期待どおりに機能します。

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
</script>

テキストをクリックすると、アラートは「キャプチャ アウト」、「キャプチャ イン」、「バブル イン」、「バブル アウト」になります。問題は、次のコードを使用しています。

<div id="out">
    <div id="in">
        Click This!!
    </div>
</div>
<script type="text/javascript">
    document.getElementById('out').addEventListener('click', function(){
        alert('bubble out');
    }, false);
    document.getElementById('in').addEventListener('click', function(){
        alert('bubble in');
    }, false);
    document.getElementById('out').addEventListener('click', function(){
        alert('capture out');
    }, true);
    document.getElementById('in').addEventListener('click', function(){
        alert('capture in');
    }, true);
</script>

この場合、アラートは「キャプチャ アウト」、「バブル イン」、「キャプチャ イン」、および「バブル アウト」になります。お気付きのように、唯一の違いは、2 番目のものではバブリングが最初に割り当てられていることですが、違いはないと思います。

これを Firefox と Chrome で試しましたが、結果は同じです (Internet Explorer がキャプチャを処理しないことは理解しています)。

4

1 に答える 1

10

quirksmodeはモデルを少し単純化しました。実際、イベントは最大3つのフェーズを経ます：キャプチャ、ターゲットで、バブリング。

次のようにevent.eventPhaseをログに記録する場合：

document.getElementById('out').addEventListener('click', function(e){
    console.log(e.eventPhase + " : " + e.target.id + " : bubbling");
}, false);

...AT_TARGETフェーズ中に「バブルイン」および「キャプチャイン」リスナーが起動することがわかります。同じフェーズで同じ要素に対して呼び出されたイベントリスナーは、登録順に呼び出されます。

于 2012-01-29T17:34:38.883 に答える