資訊專欄INFORMATION COLUMN
摘要：前言今天，為表達我對前端的熱愛，特此發(fā)了一篇小總結(jié)。其實這是一種很籠統(tǒng)的說法，因為綁定監(jiān)聽事件的方式不同，可能情況不一樣。但是不論怎樣，這么寫準沒錯。監(jiān)聽的綁定方式為了方便描述現(xiàn)象?；鸷话銜詣痈聻樽钚掳娴模郧暗念檻]基本上沒有了。
前言今天520，為表達我對前端的熱愛，特此發(fā)了一篇小總結(jié)。實際上你看不看這文章，對你目前來講，其實也沒多大影響，這是我的真心話哈哈
剛學(xué)前端的時候，有很多教程或者資料，都會教綁定監(jiān)聽事件函數(shù)時，可能會看到這么一句代碼
function (e) {
var e = e || window.event;
}
當時給你指導(dǎo)的人/資料都會跟你解釋，這是為了解決瀏覽器兼容性，為了兼容ie和Firefox。其實這是一種很籠統(tǒng)的說法，因為綁定監(jiān)聽事件的方式不同，可能情況不一樣。但是不論怎樣，這么寫準沒錯。
然而時至今日（2019-05-20），這種處理是否已經(jīng)還有必要呢，畢竟技術(shù)的東西變化很快，一些老舊的知識，是否該摒棄，別讓其再迷惑你的腦袋，讓代碼更加累贅。
監(jiān)聽的綁定方式為了方便描述e = e || window.event現(xiàn)象。先在這里總結(jié)綁定監(jiān)聽為四類，分別舉例如下：
<div onclick="console.log()">div>
<div onclick="handlerClick()">div>
// 方式三
// 在js里直接綁定
document.getElementById("example").onclick = function() {...}
// 方式四
// 用綁定事件函數(shù)綁定
var obj = document.getElementById("example");
function handlerClick () {...}
// ie8含8以下用attachEvent，監(jiān)聽事件要帶"on"
obj.addEventListener ");"click", handlerClick, false) : obj.attachEvent("onclick", handlerClick);
event的總結(jié)
我直接上總結(jié)了，以前的資料常說的，F(xiàn)irefox瀏覽器只認識監(jiān)聽綁定的函數(shù)的第一個參數(shù)event，而IE8以下只認識window.event；
現(xiàn)在經(jīng)過測試，要糾正一點就是，Firefox瀏覽器現(xiàn)在也支持window.event了。估計是版本比較老的火狐才不支持吧
所以現(xiàn)在唯一特立獨行的就是讓人苦惱的IE8（含8）以下的了。所以時至今日的新的總結(jié)就是：
方式一只有ie8以下（含8）只認識window.event，其他瀏覽器都支持window.event和句柄第一個參數(shù)event（剛好與window.event同名而已）
這種綁定方式，只需要寫個event就夠了，通吃！雖然本質(zhì)上要知道ie8以下是當做window.event，只是省略了window
方式二可以傳參window.event(可省略window)，也可以不傳參，直接在函數(shù)里用window.event(可省略window)。 畢竟所有瀏覽器都認識window.event
方式三ie8以下（含8）不支持函數(shù)第一個參數(shù)是event的
所以統(tǒng)一不寫第一個參數(shù)event，直接在代碼里用event就好了。因為大家都支持window.event
方式四任何一種方式都支持，可以是綁定函數(shù)帶第一個參數(shù)event也可以是不帶第一個參數(shù)直接寫window.event（可省略window）
在這種方式里很特殊，就算是IE8以下的都支持第一個參數(shù)event
大總結(jié)以后要用event的話，所有瀏覽器統(tǒng)一當做window.event來處理就行了?；鸷话銜詣痈聻樽钚掳娴?，所以前的顧慮基本上沒有了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6738.html
摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動布局` Document ...
摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動布局` Document ...
摘要：接受個參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點。委托代理事件是那些被綁定到父級元素的事件，但是只有當滿足一定匹配條件時才會被挪。 一、頁面布局 1.問題：假設(shè)高度已知，請寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動布局` Document ...
閱讀 1381·2021-09-22 15:09
閱讀 2734·2021-08-20 09:38
閱讀 2466·2021-08-03 14:03
閱讀 922·2019-08-30 15:55
閱讀 3397·2019-08-30 12:59
閱讀 3579·2019-08-26 13:48
閱讀 1916·2019-08-26 11:40
閱讀 709·2019-08-26 10:30
