傳統(tǒng)方式 

  element.onclick = function(e){

     // ...

   };

 1.  傳統(tǒng)綁定的優(yōu)點(diǎn)

非常簡(jiǎn)單和穩(wěn)定，可以確保它在你使用的不同瀏覽器中運(yùn)作一致

處理事件時(shí)，this關(guān)鍵字引用的是當(dāng)前元素，這很有幫組

2. 傳統(tǒng)綁定的缺點(diǎn)

傳統(tǒng)方法只會(huì)在事件冒泡中運(yùn)行，而非捕獲和冒泡

一個(gè)元素一次只能綁定一個(gè)事件處理函數(shù)。新綁定的事件處理函數(shù)會(huì)覆蓋舊的事件處理函數(shù)

事件對(duì)象參數(shù)(e)僅非IE瀏覽器可用

W3C方式 

 element.addEventListener('click', function(e){

    // ...

  }, false);

1. W3C綁定的優(yōu)點(diǎn)

該方法同時(shí)支持事件處理的捕獲和冒泡階段。事件階段取決于addEventListener最后的參數(shù)設(shè)置：false (冒泡) 或 true (捕獲)。

在事件處理函數(shù)內(nèi)部，this關(guān)鍵字引用當(dāng)前元素。

事件對(duì)象總是可以通過(guò)處理函數(shù)的第一個(gè)參數(shù)(e)捕獲。

可以為同一個(gè)元素綁定你所希望的多個(gè)事件，同時(shí)并不會(huì)覆蓋先前綁定的事件

2. W3C綁定的缺點(diǎn)

IE不支持，你必須使用IE的attachEvent函數(shù)替代。

IE方式

element.attachEvent('onclick', function(){

    // ...

  });

1. IE方式的優(yōu)點(diǎn)

可以為同一個(gè)元素綁定你所希望的多個(gè)事件，同時(shí)并不會(huì)覆蓋先前綁定的事件。

2. IE方式的缺點(diǎn)

IE僅支持事件捕獲的冒泡階段

事件監(jiān)聽(tīng)函數(shù)內(nèi)的this關(guān)鍵字指向了window對(duì)象，而不是當(dāng)前元素（IE的一個(gè)巨大缺點(diǎn)）

事件對(duì)象僅存在與window.event參數(shù)中

事件必須以ontype的形式命名，比如，onclick而非click

僅IE可用。你必須在非IE瀏覽器中使用W3C的addEventListener

Dean Edwards的方案（addEvent/removeEvent庫(kù)）   

1. addEvent的優(yōu)點(diǎn)

可以在所有瀏覽器中工作，就算是更古老無(wú)任何支持的瀏覽器

this關(guān)鍵字可以在所有的綁定函數(shù)中使用，指向的是當(dāng)前元素

中和了所有防止瀏覽器默認(rèn)行為和阻止事件冒泡的各種瀏覽器特定函數(shù)

不管瀏覽器類(lèi)型，事件對(duì)象總是作為第一個(gè)對(duì)象傳入

2. addEvent的缺點(diǎn)

僅工作在冒泡階段（因?yàn)樗钊胧褂檬录壎ǖ膫鹘y(tǒng)方式）

以上就是小編為大家?guī)?lái)的淺談JavaScript事件綁定的常用方法及其優(yōu)缺點(diǎn)分析全部?jī)?nèi)容了，希望大家多多支持腳本之家~

最新評(píng)論