事件的绑定、捕获和冒泡

传统的绑定方式

element.onclick = function(e){
// ...
};

传统绑定的优点
非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
处理事件时，this关键字引用的是当前元素，这很有帮组
传统绑定的缺点
传统方法只会在事件冒泡中运行，而非捕获和冒泡
一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
事件对象参数(e)仅非IE浏览器可用

W3C绑定方式

element.addEventListener('click', function(e){
// ...
}, false);

W3C绑定的优点
该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
在事件处理函数内部，this关键字引用当前元素。
事件对象总是可以通过处理函数的第一个参数(e)捕获。
可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
W3C绑定的缺点
IE不支持，你必须使用IE的attachEvent函数替代。

IE绑定事件的方法

element.attachEvent('onclick', function(){
// ...
});

IE方式的优点
可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。
IE方式的缺点
IE仅支持事件捕获的冒泡阶段
事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
事件对象仅存在与window.event参数中
事件必须以ontype的形式命名，比如，onclick而非click
仅IE可用。你必须在非IE浏览器中使用W3C的addEventListener

兼容写法

// 绑定
/***************************************
element 需要绑定事件的元素
type 绑定事件的名称（没有on）
fn 要绑定的事件对应的函数
****************************************/
function addEvevt(element,type,fn){
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent('on' + type,fn,);
}else{
element['on' + type]=fn;
}
}
// 解除绑定
/***************************************
element 需要绑定事件的元素
type 绑定事件的名称（没有on）
fn 要绑定的事件对应的函数
****************************************/
function removeEvent(element,type,fn){
if(element.removeEventListener){
element.removeEventListener(type,fn,false);
}else if(element.detachEvent){
element.detachEvent('on' + type,fn,);
}else{
element['on' + type]=null;
}
}

事件的捕获

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)

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

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕获
false=冒泡

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

• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

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

• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;
•return false;

取消冒泡的兼容写法

/***************************************
ev 取消冒泡事件对象
****************************************/
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}