js中事件传播流程（冒泡，捕获）

js事件流（event flow ）: 是指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序，并存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件冒泡和事件捕获的区别：
       当事件发生时，最先得到通知的是window，然后是document，由上至下逐级依次而入，直到真正触发事件的那个元素(目标元素)为止，这个过程就是捕获。
       接下来，事件会从目标元素开始起泡，由下至上逐级依次传播，直到window对象为止，这个过程就是冒泡。
       所以捕获比冒泡先执行。其中DOM3级事件在DOM2的基础之上添加了更多的事件类型。

如下图：

背景

       早期的IE事件传播方向为由上至下，即从document逐级向下传播到目标元素；
       而Netscape公司的Navigator则是朝相反的方向传播，也就是从目标元素开始向上逐级传播最终至window。 两家公司对于事件流出现了截然相反的定义。
       后来ECMAScript在DOM2中对事件流进行了进一步规范，基本上就是上述二者的结合。

下面看一个例子

<div class="box" id="box2">
	<div class="box" id="box3">
	|	<div class="box" id="box4">
	|	|	<div class="box" id="box5">
	|	|	|	<div class="box" id="box6">
	|	|	|	|	<h3>点我开始!!</h3>
	|	|	|	</div>
	|	|	</div>
	|	</div>
	</div>
</div>

那么当我们点击box6中的HE以后，事件的触发过程也就是这样的：

点击时效果：

阻止事件冒泡的方法：

e.stopPropagation(); //兼容IE
e.cancelBubble = true; //其他浏览器
 
可以整合成如下：
if(e.stopPropagation()){
    e.stopPropagation();
}else{
    e.canceBubble=true;
}

参考链接：http://www.cnblogs.com/souvenir/p/4988367.html