傳統方式
element.onclick = function(e){
// ...
};
1. 傳統綁定的優點
非常簡單和穩定，可以確保它在你使用的不同浏覽器中運作一致
處理事件時，this關鍵字引用的是當前元素，這很有幫組
2. 傳統綁定的缺點
傳統方法只會在事件冒泡中運行，而非捕獲和冒泡
一個元素一次只能綁定一個事件處理函數。新綁定的事件處理函數會覆蓋舊的事件處理函數
事件對象參數(e)僅非IE浏覽器可用
W3C方式
element.addEventListener('click', function(e){
// ...
}, false);
1. W3C綁定的優點
該方法同時支持事件處理的捕獲和冒泡階段。事件階段取決於addEventListener最後的參數設置：false (冒泡) 或 true (捕獲)。
在事件處理函數內部，this關鍵字引用當前元素。
事件對象總是可以通過處理函數的第一個參數(e)捕獲。
可以為同一個元素綁定你所希望的多個事件，同時並不會覆蓋先前綁定的事件
2. W3C綁定的缺點
IE不支持，你必須使用IE的attachEvent函數替代。
IE方式
element.attachEvent('onclick', function(){
// ...
});
1. IE方式的優點
可以為同一個元素綁定你所希望的多個事件，同時並不會覆蓋先前綁定的事件。
2. IE方式的缺點
IE僅支持事件捕獲的冒泡階段
事件監聽函數內的this關鍵字指向了window對象，而不是當前元素（IE的一個巨大缺點）
事件對象僅存在與window.event參數中
事件必須以ontype的形式命名，比如，onclick而非click
僅IE可用。你必須在非IE浏覽器中使用W3C的addEventListener
Dean Edwards的方案（addEvent/removeEvent庫）
1. addEvent的優點
可以在所有浏覽器中工作，就算是更古老無任何支持的浏覽器
this關鍵字可以在所有的綁定函數中使用，指向的是當前元素
中和了所有防止浏覽器默認行為和阻止事件冒泡的各種浏覽器特定函數
不管浏覽器類型，事件對象總是作為第一個對象傳入
2. addEvent的缺點
僅工作在冒泡階段（因為它深入使用事件綁定的傳統方式）
以上就是小編為大家帶來的淺談JavaScript事件綁定的常用方法及其優缺點分析全部內容了，希望大家多多支持~