淺談JavaScript事件綁定的常用方法及其優缺點分析

傳統方式 

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

   

 1.  傳統綁定的優點

非常簡單且穩定，可確保它在你所使用的不同瀏覽器中運作一致

非常簡單且穩定，可確保它在你所使用的不同瀏覽器中運作一致

非常簡單且穩定，可確保它在你所使用的不同瀏覽器中運作一致

是當前，this元素，這很有幫組

2. 傳統綁定的缺點

傳統方法只會在事件冒泡中運行，而非捕獲和冒泡

一個元素一次只能綁定一個事件處理函數。新綁定的事件處理函數會覆寫舊的事件處理函數

事件物件參數(e)僅非IE瀏覽器可用

W3C方式 

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

   

1.

   

1.同時支援事件處理的捕捉和冒泡階段。事件階段取決於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的缺點🎜🎜僅工作在冒泡階段（因為它深入使用事件綁定的傳統方式）🎜🎜🎜🎜