淺談JavaScript事件綁定的常用方法及其優(yōu)缺點分析
傳統(tǒng)方式
element.onclick = function(e){
// ...
};
1. 傳統(tǒng)綁定的優(yōu)點
非常簡單和穩(wěn)定，可以確保它在你使用的不同瀏覽器中運(yùn)作一致
處理事件時，this關(guān)鍵字引用的是當(dāng)前元素，這很有幫組
2. 傳統(tǒng)綁定的缺點
傳統(tǒng)方法只會在事件冒泡中運(yùn)行，而非捕獲和冒泡
一個元素一次只能綁定一個事件處理函數(shù)。新綁定的事件處理函數(shù)會覆蓋舊的事件處理函數(shù)
事件對象參數(shù)(e)僅非IE瀏覽器可用
W3C方式
element.addEventListener('click', function(e){
// ...
}, false);
1. W3C綁定的優(yōu)點
該方法同時支持事件處理的捕獲和冒泡階段。事件階段取決于addEventListener最后的參數(shù)設(shè)置：false (冒泡) 或 true (捕獲)。
在事件處理函數(shù)內(nèi)部，this關(guān)鍵字引用當(dāng)前元素。
事件對象總是可以通過處理函數(shù)的第一個參數(shù)(e)捕獲。
可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件
2. W3C綁定的缺點
IE不支持，你必須使用IE的attachEvent函數(shù)替代。
IE方式
element.attachEvent('onclick', function(){
// ...
});
1. IE方式的優(yōu)點
可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件。
2. IE方式的缺點
IE僅支持事件捕獲的冒泡階段
事件監(jiān)聽函數(shù)內(nèi)的this關(guān)鍵字指向了window對象，而不是當(dāng)前元素（IE的一個巨大缺點）
事件對象僅存在與window.event參數(shù)中
事件必須以ontype的形式命名，比如，onclick而非click
僅IE可用。你必須在非IE瀏覽器中使用W3C的addEventListener
Dean Edwards的方案（addEvent/removeEvent庫）
1. addEvent的優(yōu)點
可以在所有瀏覽器中工作，就算是更古老無任何支持的瀏覽器
this關(guān)鍵字可以在所有的綁定函數(shù)中使用，指向的是當(dāng)前元素
中和了所有防止瀏覽器默認(rèn)行為和阻止事件冒泡的各種瀏覽器特定函數(shù)
不管瀏覽器類型，事件對象總是作為第一個對象傳入
2. addEvent的缺點
僅工作在冒泡階段（因為它深入使用事件綁定的傳統(tǒng)方式）
以上就是小編為大家?guī)淼臏\談JavaScript事件綁定的常用方法及其優(yōu)缺點分析全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
這篇文章主要介紹了javascript如何判斷是否按回車鍵并解決瀏覽器之間的差異問題,需要的朋友可以參考下2014-05-05
細(xì)述Javascript的加法運(yùn)算符的具體使用
這篇文章主要介紹了細(xì)述Javascript的加法運(yùn)算符的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
下面小編就為大家?guī)硪黄狫S中的forEach、$.each、map方法推薦。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-04-04
微信小程序出現(xiàn)wx.getLocation再次授權(quán)問題的解決方法分析
這篇文章主要介紹了微信小程序出現(xiàn)wx.getLocation再次授權(quán)問題的解決方法,結(jié)合實例形式分析了解決wx.getLocation再次授權(quán)問題的相關(guān)操作步驟,需要的朋友可以參考下2019-01-01
這篇文章主要為大家詳細(xì)介紹了Three.JS實現(xiàn)三維場景，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
原生JavaScript實現(xiàn)AJAX、JSONP
本篇文章將會講解原生JavaScript如何實現(xiàn)簡單的AJAX，還有跨域請求JSONP。具有很好的參考價值。下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹如何完美實現(xiàn)js選項卡切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了基于微前端qiankun的多頁簽緩存方案實踐,本文對qiankun框架的使用沒有做太多的發(fā)散總結(jié)，官網(wǎng)和Github上已經(jīng)有很多相關(guān)問題的總結(jié)和踩坑經(jīng)驗可供參考，需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于js如何獲取圖片url的Blob值并預(yù)覽的相關(guān)資料，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了H5 js點擊按鈕復(fù)制文本到粘貼板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11