事件冒泡和捕获的执行顺序

<div id="div1">我是div1 
	<div id="div2">我是div2 
		<div id="div3">我是div3 
			<div id="div4">我是div4</div> 
		</div> 
	</div> 
</div>
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");

div1.addEventListener("click",function(){
	alert("我是div1");
})

div2.addEventListener("click",function(){
	alert("我是div2");
})

div3.addEventListener("click",function(){
	alert("我是div3");
})

div4.addEventListener("click",function(){
	alert("我是div4");
})

改一下代码:

div1.addEventListener("click",function(){
	alert("div1");
},false);
div2.addEventListener("click",function(){
	alert("div2");
},true);
div3.addEventListener("click",function(){
	alert("div3");
},false);
div4.addEventListener("click",function(){
	alert("div4");
},true);

在addEventListener里面，false是默认的，表示的就是冒泡。

这时的div1和div3是冒泡事件，div2和div4是捕获事件，那么我们点击div4以后，弹出的顺序是2-4-3-1。因为我们先执行捕获过程，看看这个例子中有哪几个是捕获的，有div2和div4，那么捕获又是从大到小，所以，先弹出div2，再弹出div4，捕获结束以后就该是冒泡了，那么冒泡的顺序呢？从小到大，从子到父，所以就先弹出div3，再就是div1，所以最后的顺序是2-4-3-1.

要是我们点击div3，结果是2-3-1，同样的道理，先捕获，那么捕获是从div1开始到div3 的，这中间只有div2是捕获，div4并没有执行到，因为我们点击的目标是div3，后面的步骤和前面说过的一样，先3后1.

修改一下代码：

div1.addEventListener("click",function(){
	alert("div1");
},false);
div2.addEventListener("click",function(){
	alert("div2_冒泡");
},false);
div2.addEventListener("click",function(){
	alert("div2_捕获");
},true);

那么，当我们点击div2的时候，结果是 div2_冒泡 -> div_2捕获 -> div1这样的顺序

结论：

绑定在被点击元素的事件是按照代码的顺序发生的，其他非绑定的元素则是通过冒泡或者捕获的触发。按照W3C的标准，先发生捕获事件，后发生冒泡事件。所以事件的整体顺序是：非目标元素捕获 -> 目标元素代码顺序 -> 非目标元素冒泡。