文章标题

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

假设一个元素div，它有一个下级元素p。

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序是：

两种模型

Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡。

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

// 获取事件

function getEvent(){

if(window.event) {return window.event;}

func=getEvent.caller;

while(func!=null){

var arg0=func.arguments[0];

if(arg0){

if((arg0.constructor==Event || arg0.constructor ==MouseEvent

|| arg0.constructor==KeyboardEvent)

||(typeof(arg0)==”object” && arg0.preventDefault

&& arg0.stopPropagation)){

return arg0;

}

}

func=func.caller;

}

return null;

}

//阻止冒泡

function cancelBubble(){

var e=getEvent();

if(window.event){

//e.returnValue=false;//阻止自身行为

e.cancelBubble=true;//阻止冒泡

}else if(e.preventDefault){

//e.preventDefault();//阻止自身行为

e.stopPropagation();//阻止冒泡

}

}

注释：

event代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等。 event对象只在事件发生的过程中才有效。

事件冒泡（的过程）：事件从发生的目（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

事件的传播是可以阻止的：

在W3c中，使用stopPropagation（）方法

在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后面的冒泡过程也不会发生了；

阻止事件的默认行为，例如click 后的跳转

在W3c中，使用preventDefault（）方法；

在IE下设置window.event.returnValue = false；