本文介紹一些JavaScript事件綁定的常用方法及其優(yōu)缺點(diǎn)，同時(shí)在最后展示一個(gè)由 Dean Edwards 寫(xiě)的一個(gè)比較完美的事件綁定方案。

傳統(tǒng)方式

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

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

• 非常簡(jiǎn)單和穩(wěn)定，可以確保它在你使用的不同瀏覽器中運(yùn)作一致
• 處理事件時(shí)，this關(guān)鍵字引用的是當(dāng)前元素，這很有幫組

傳統(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);

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ì)覆蓋先前綁定的事件

W3C綁定的缺點(diǎn)

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

IE方式

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

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

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

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ù)）

function addEvent(elementment, type, handler) {// 為每個(gè)事件處理函數(shù)賦予一個(gè)獨(dú)立的IDif(!handler.$$guid) handler.$$guid = addEvent.guid++;// 為元素建立一個(gè)事件類(lèi)型的散列表if(!elementment.events) elementment.events = {};// 為每對(duì)元素/事件建立一個(gè)事件處理函數(shù)的散列表var handlers = elementment.events[type];if(!handlers) {handlers = elementment.events[type] = {};// 存儲(chǔ)已有的事件處理函數(shù)(如果已存在一個(gè))if(elementment["on" + type]) {handlers[0] = elementment["on" + type];}}// 在散列表中存儲(chǔ)該事件函數(shù)handlers[handler.$$guid] = handler;// 賦予一個(gè)全局事件處理函數(shù)來(lái)出來(lái)所有工作elementment["on" + type] = handleEvent;}// 創(chuàng)建獨(dú)立ID的計(jì)數(shù)器addEvent.guid = 1;function removeEvent(elementment, type, handler) {// 從散列表中刪除事件處理函數(shù)if(elementment.events && elementment.events[type]) {delementte elementment.events[type][handler.$$guid];}}function handleEvent(event) {var returnValue = true;// 獲取事件對(duì)象(IE使用全局的事件對(duì)象)event = event || fixEvent(window.event);// 獲取事件處理函數(shù)散列表的引用var handlers = this.events[event.type];// 依次執(zhí)行每個(gè)事件處理函數(shù)for(var i in handlers) {this.$$handerEvent = handlers[i];if(this.$$handlerEvent(event) === fasle) {returnValue = false;}}return returnValue;}// 增加一些IE事件對(duì)象缺乏的方法function fixEvent(event) {event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;}fixEvent.preventDefault = function() {this.returnValue = false;}fixEvent.stopPropagation = function() {this.cancelBubble = true;}

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

• 可以在所有瀏覽器中工作，就算是更古老無(wú)任何支持的瀏覽器
• this關(guān)鍵字可以在所有的綁定函數(shù)中使用，指向的是當(dāng)前元素
• 中和了所有防止瀏覽器默認(rèn)行為和阻止事件冒泡的各種瀏覽器特定函數(shù)
• 不管瀏覽器類(lèi)型，事件對(duì)象總是作為第一個(gè)對(duì)象傳入

addEvent的缺點(diǎn)

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

總結(jié)

以上是生活随笔為你收集整理的JavaScript事件绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。