注册捕获阶段的事件监听器在冒泡之前未触发 - 为什么？

Question

I'm trying to understand what determines the order in which event handlers are triggered when clicking a nested <div> - what I am seeing seems to be at odds with documented behaviour so I'm looking for a little help to understand it. 我试图了解在点击嵌套<div>时触发事件处理程序的顺序是什么 - 我所看到的似乎与记录的行为不一致所以我正在寻找一些帮助来理解它。

I have 2 nested divs, and I have 2 event handlers attached to each, one for the capturing phase, and one for the bubbling phase: 我有2个嵌套的div，每个都有2个事件处理程序，一个用于捕获阶段，另一个用于冒泡阶段：

<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>

According to what I have read the output should be: 根据我所读的输出应该是：

outer true
inner true
inner false
outer false

but what I actually see (on Chrome and Firefox) is: 但我实际看到的（在Chrome和Firefox上）是：

outer true
inner false
inner true
outer false

Can anyone explain the discrepancy? 任何人都可以解释这种差异吗？

Answer 1

W3C event flow spec (ie, what Chrome and Firefox implement) is that all events are first captured until they reach the target element, at which point they bubble up again. W3C事件流规范（即Chrome和Firefox实现的）是所有事件首先被捕获，直到它们到达目标元素，此时它们再次冒泡。 However, when the event flow reaches the event target itself, the event is no longer capturing or bubbling--it's on the target itself. 但是，当事件流到达事件目标本身时，事件不再捕获或冒泡 - 它位于目标本身上。 Because bubbling/capturing is not applicable, the event handlers fire in the order in which they are registered. 由于冒泡/捕获不适用，事件处理程序按照它们的注册顺序触发。 Try swapping the order of your inner element event handlers, you'll find that it also changes the order of the console output. 尝试交换内部元素事件处理程序的顺序，您会发现它也会更改控制台输出的顺序。

jsFiddle example: http://jsfiddle.net/RTfwd/1/ jsFiddle示例： http ： //jsfiddle.net/RTfwd/1/

More recent revisions of the DOM Event spec make this point more clear ( http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html ): 最近对DOM事件规范的修订使这一点更加明确（ http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html ）：

bubbling phase The process by which an event can be handled by one of the target's ancestors after being handled by the event target. 冒泡阶段 （ bubbling phase）事件目标处理事件后，其中一个目标的祖先可以处理事件的过程。 See the description of the bubble phase in the context of event flow for more details. 有关更多详细信息，请参阅事件流上下文中的气泡阶段说明。

capture phase The process by which an event can be handled by one of the target's ancestors before being handled by the event target. 捕获阶段捕获阶段在事件目标处理事件之前，目标的一个祖先可以处理事件的过程。 See the description of the capture phase in the context of event flow for more details. 有关更多详细信息，请参阅事件流上下文中的捕获阶段的描述。

注册捕获阶段的事件监听器在冒泡之前未触发 - 为什么？

问题描述

1 个解决方案

解决方案1
16 已采纳 2012-08-07 07:48:09

注册捕获阶段的事件监听器在冒泡之前未触发 - 为什么？

问题描述

1 个解决方案

解决方案1 16 已采纳 2012-08-07 07:48:09

解决方案1
16 已采纳 2012-08-07 07:48:09