傳統(tǒng)的綁定方式
element.onclick = function(e){
// ...
};
傳統(tǒng)綁定的優(yōu)點
非常簡單和穩(wěn)定庆械，可以確保它在你使用的不同瀏覽器中運作一致
處理事件時津肛，this關(guān)鍵字引用的是當(dāng)前元素葫辐，這很有幫組
傳統(tǒng)綁定的缺點
傳統(tǒng)方法只會在事件冒泡中運行搜锰，而非捕獲和冒泡
一個元素一次只能綁定一個事件處理函數(shù)。新綁定的事件處理函數(shù)會覆蓋舊的事件處理函數(shù)
事件對象參數(shù)(e)僅非IE瀏覽器可用
W3C綁定方式
element.addEventListener('click', function(e){
// ...
}, false);
W3C綁定的優(yōu)點
該方法同時支持事件處理的捕獲和冒泡階段耿战。事件階段取決于addEventListener最后的參數(shù)設(shè)置：false (冒泡) 或 true (捕獲)蛋叼。
在事件處理函數(shù)內(nèi)部，this關(guān)鍵字引用當(dāng)前元素剂陡。
事件對象總是可以通過處理函數(shù)的第一個參數(shù)(e)捕獲狈涮。
可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件
W3C綁定的缺點
IE不支持鸭栖，你必須使用IE的attachEvent函數(shù)替代歌馍。
IE綁定事件的方法
element.attachEvent('onclick', function(){
// ...
});
IE方式的優(yōu)點
可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件晕鹊。
IE方式的缺點
IE僅支持事件捕獲的冒泡階段
事件監(jiān)聽函數(shù)內(nèi)的this關(guān)鍵字指向了window對象松却，而不是當(dāng)前元素（IE的一個巨大缺點）
事件對象僅存在與window.event參數(shù)中
事件必須以ontype的形式命名，比如溅话，onclick而非click
僅IE可用晓锻。你必須在非IE瀏覽器中使用W3C的addEventListener
兼容寫法
// 綁定
/***************************************
element 需要綁定事件的元素
type 綁定事件的名稱（沒有on）
fn 要綁定的事件對應(yīng)的函數(shù)
****************************************/
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 要綁定的事件對應(yīng)的函數(shù)
****************************************/
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 對象)開始觸發(fā)，然后到最精確(也可以在窗口級別捕獲事件飞几，不過必須由開發(fā)人員特別指定)带射。
冒泡型事件：事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象)的順序觸發(fā)。
DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件循狰，但是窟社，捕獲型事件先發(fā)生。兩種事件流會觸及DOM中的所有對象绪钥，從document對象開始灿里，也在document對象結(jié)束。
DOM事件模型最獨特的性質(zhì)是程腹，文本節(jié)點也觸發(fā)事件(在IE中不會)
事件捕獲階段：事件從最上一級標(biāo)簽開始往下查找匣吊，直到捕獲到事件目標(biāo)(target)。
事件冒泡階段：事件從事件目標(biāo)(target)開始，往上冒泡直到頁面的最上一級標(biāo)簽色鸳。
W3C模型
W3C模型是將兩者進行中和社痛，在W3C模型中，任何事件發(fā)生時命雀，先從頂層開始進行事件捕獲蒜哀，直到事件觸發(fā)到達了事件源元素。然后吏砂，再從事件源往上進行事件冒泡撵儿，直到到達document。
程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡狐血，方法就是綁定事件時通過addEventListener函數(shù)淀歇，它有三個參數(shù)，第三個參數(shù)若是true匈织，則表示采用事件捕獲浪默，若是false，則表示采用事件冒泡缀匕。
ele.addEventListener('click',doSomething2,true)
true=捕獲
false=冒泡
事件的傳播是可以阻止的：
? 在W3c中浴鸿，使用stopPropagation（）方法
? 在IE下設(shè)置cancelBubble = true；
在捕獲的過程中stopPropagation（）弦追；后岳链，后面的冒泡過程也不會發(fā)生了~
阻止事件的默認行為，例如click <a>后的跳轉(zhuǎn)~
? 在W3c中劲件，使用preventDefault（）方法掸哑；
? 在IE下設(shè)置window.event.returnValue = false;
?return false;
取消冒泡的兼容寫法
/***************************************
ev 取消冒泡事件對象
****************************************/
function stopBubble(e){
if(e && e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
