事件冒泡 事件捕获

一、事件流（捕获，冒泡）

事件流：指从页面中接收事件的顺序，有冒泡流和捕获流。
当页面中发生某种事件（比如鼠标点击，鼠标滑过等）时，毫无疑问子元素和父元素都会接收到该事件，可具体顺序是怎样的呢？冒泡和捕获则描述了两种不同的顺序。

事件传播的三个过程，事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获由远及近逐渐靠近事件目标，事件冒泡由事件目标逐渐向上冒泡
那是不是所有的事件都要经历这三个过程呢？其实不然
IE：它认为事件流应该是事件冒泡。
Netscape：它则认为事件流应该是事件捕获。
W3C：首先是事件捕获然后事件冒泡
在支持w3c的浏览器中，程序员可以通过设置addEventListener(type,handler,useCapture)中的userCapture值来决定元素是在冒泡阶段执行事件还是捕获阶段执行，默认为false，即冒泡阶段。

二、事件处理程序

DOM0级事件处理程序

注意：基于DOM0的事件，对于同一个dom节点而言，只能注册一个，后边注册的 同种事件 会覆盖之前注册的。

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理；

DOM2级事件处理程序

DOM2支持同一dom元素注册多个同种事件，事件发生的顺序按照添加的顺序依次触发（IE是相反的）。
DOM2事件通过addEventListener和removeEventListener管理

//addEventListener(eventName,handlers,boolean);removeEventListener(),两个方法都一样接收三个参数,第一个是要处理的事件名,第二个是事件处理程序,第三个值为false时表示在事件冒泡阶段调用事件处理程序,一般建议在冒泡阶段使用,特殊情况才在捕获阶段;
注意：通过addEventListener()添加的事件处理程序只能用removeEventListener()来移除，并且移除时传入的参数必须与添加时传入的参数一样；

IE事件处理程序

//IE事件处理程序(IE和Opera支持)
//IE用了attachEvent(),detachEvent(),接收两个参数,事件名称和事件处理程序,通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段,所以平时为了兼容更多的浏览器最好将事件添加到事件冒泡阶段,IE8及以前只支持事件冒泡;

三、两种方式来阻止事件冒泡。
方式一：event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
1
2
3
方式二：return false;

$("#div1").mousedown(function(event){
return false;
});
1
2
3
但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡，不阻止事件本身。