事件流的顺序

Question

js 部分很简单，就是显示事件流的执行顺序。

window.onload = function(){

    var outA = document.getElementById("outA");  

    var outB = document.getElementById("outB");  

    var outC = document.getElementById("outC");  

    outA.addEventListener('click',function(){alert("bubble1");},false);

    outB.addEventListener('click',function(){alert("bubble2");},false);

    outB.addEventListener('click',function(){alert("capture2");},true);    

    outC.addEventListener('click',function(){alert("target");},true);

    outA.addEventListener('click',function(){alert("capture1");},true);

};

css用来渲染这三个 div

div#outA{

    width:400px; height:400px; background:#CDC9C9;position:relative;

}

div#outB{

    height:200; background:#0000ff;top:100px;position:relative;

}

div#outC{

    height:100px; background:#FFB90F;top:50px;position:relative;

}

结构更简单，三个div

<div id="outA">

    <div id="outB">

        <div id="outC">

        </div> 

    </div>

</div>

当点击divB的时候，我的理解应该输出是

capture1--capture2--bubble2--bubble1

为何实际结果是

capture1--bubble2--capture2--bubble1？

Answer 1

1、window 往事件触发处传播，遇到注册的捕获事件会触发。2、传播到事件触发处时触发注册的事件。3、事件触发处往 window 传播，遇到注册的冒泡事件会触发。divB正是事件触发处，而这时的事件触发顺序由事件的注册顺序决定。你代码中是先注册了bubble2，后注册了capture2。你可以调换一下顺序再试一下。

Answer 2

又翻了翻《js高程》，事件流分为：事件捕获、处于目标、事件冒泡三个阶段。DOM2级事件标准明确要求捕获阶段不会涉及事件目标。所以点击的是outB时，虽然用true参数指定了捕获阶段的事件，但是却并不能让其在捕获阶段被触发，因为它本身是事件目标。《js高程》说:"IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的时间。结果，就是有两个机会在目标对象上面操作事件"，看来事实上，高版本浏览器更加和标准相符了。我在chrome上测试，此时outB上事件触发顺序只和绑定顺序相关了，你不妨将outB上的两个事件绑定交换下顺序，就会发现结果就又是capture1--capture2--bubble2--bubble1。