Question

在w3c手册中，有三个事件阶段：捕获阶段，目标阶段和冒泡阶段。

 

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);
};

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 id="outA">
    <div id="outB">
        <div id="outC">
        </div> 
    </div>
</div>

现在，让我单击ID为outB的div，看看会发生什么。
第一阶段是捕获阶段，其中包含：

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

outA首先获得它，所以先alert("capture1")，然后再alert("capture2")

气泡阶段包含：

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

outB首先获得气泡，所以先alert("bubble2")，然后再alert("bubble1")。

我认为事件流的顺序应为：

capture1--capture2--bubble2--bubble1

我们确切得到的是以下顺序：

capture1--bubble2--capture2--bubble1

为什么？

捕获并按事件执行顺序起泡

0 个答案: