16

ネストされたものをクリックしたときにイベントハンドラーがトリガーされる順序を決定するものを理解しようとして<div>います.

2 つのネストされた div があり、それぞれに 2 つのイベント ハンドラーがアタッチされています。1 つはキャプチャ フェーズ用、もう 1 つはバブリング フェーズ用です。

<html>
    <head>
        <script>
            function setup(){
                var outer = document.getElementById('outer');
                outer.addEventListener('click', function(){console.log('outer false');}, false);
                outer.addEventListener('click', function(){console.log('outer true');}, true);

                var inner = document.getElementById('inner');
                inner.addEventListener('click', function(){console.log('inner false');}, false);
                inner.addEventListener('click', function(){console.log('inner true');}, true);
            }           
        </script>
        <style>
            div {
                border: 1px solid;
                padding: 1em;
            }
        </style>
    </head>
    <body onload="setup()">
        <div id="outer">
            <div id="inner">
                CLICK
            </div>
        </div>
    </body>
</html>

私が読んだことによると、出力は次のようになります。

outer true
inner true
inner false
outer false

しかし、実際に (Chrome と Firefox で) 表示されるのは次のとおりです。

outer true
inner false
inner true
outer false

誰も矛盾を説明できますか？

4

1 に答える 1

18

W3C イベント フロー仕様 (つまり、Chrome と Firefox が実装するもの) は、すべてのイベントが最初にターゲット要素に到達するまでキャプチャされ、その時点で再びバブルアップすることです。ただし、イベント フローがイベント ターゲット自体に到達すると、イベントはもはやキャプチャまたはバブリングしません。それはターゲット自体にあります。バブリング/キャプチャーは適用されないため、イベント ハンドラーは登録された順序で起動します。内部要素イベント ハンドラーの順序を交換してみてください。コンソール出力の順序も変更されることがわかります。

jsFiddle の例: http://jsfiddle.net/RTfwd/1/

DOM イベント仕様の最近のリビジョンでは、この点がより明確になっています ( http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html ):

バブリング フェーズイベント ターゲットによって処理された後 、ターゲットの祖先の 1 つによってイベントが処理されるプロセス。詳細については、イベント フローのコンテキストでのバブル フェーズの説明を参照してください。

キャプチャ フェーズイベント ターゲットによって処理される前に、ターゲットの祖先の 1 つによってイベントが処理されるプロセス。詳細については、イベント フローのコンテキストでキャプチャ フェーズの説明を参照してください。

于 2012-08-07T07:48:09.107 に答える