js section is simple enough to show the order in which the event flow is executed.
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 is used to render these three div
div-sharpoutA{
width:400px; height:400px; background:-sharpCDC9C9;position:relative;
}
div-sharpoutB{
height:200; background:-sharp0000ff;top:100px;position:relative;
}
div-sharpoutC{
height:100px; background:-sharpFFB90F;top:50px;position:relative;
}structure is simpler, three div
<div id="outA">
<div id="outB">
<div id="outC">
</div>
</div>
</div> when clicking on divB, my understanding is that the output should be
capture1--capture2--bubble2--bubble1
Why is the actual result
capture1--bubble2--capture2--bubble1?