看了跟不看沒區別的文章—摒棄e || window.event舊認識

前言

今天520，爲表達我對前端的熱愛，特此發了一篇小總結。實際上你看不看這文章，對你目前來說，其實也沒多大影響，這是個人真心話哈哈

剛學前端的時候，有不少教程或者資料，都會教綁定監聽事件函數時，可能會看到這麼一句代碼

function (e) {
    var e = e || window.event;
} 
複製代碼

當時給你指導的人/資料都會跟你解釋，這是爲了解決瀏覽器兼容性，爲了兼容ie和Firefox。其實這是一種很籠統的說法，由於綁定監聽事件的方式不一樣，可能狀況不同。可是不論怎樣，這麼寫準沒錯。

然而時至今日（2019-05-20），這種處理是否已經還有必要呢，畢竟技術的東西變化很快，一些老舊的知識，是否該摒棄，別讓其再迷惑你的腦殼，讓代碼更加累贅。

監聽的綁定方式

爲了方便描述e = e || window.event現象。先在這裏總結綁定監聽爲四類，分別舉例以下：

<!-- 方式一 -->
<!-- 腳本直接寫在html裏 -->
<div onclick="console.log()"></div>
複製代碼

<!-- 方式二 -->
<!-- html裏綁定函數 -->
<div onclick="handlerClick()"></div>
複製代碼

// 方式三
// 在js裏直接綁定
document.getElementById('example').onclick = function() {...}
複製代碼

// 方式四
// 用綁定事件函數綁定
var obj = document.getElementById('example');
function handlerClick () {...}
// ie8含8如下用attachEvent，監聽事件要帶'on'
obj.addEventListener ? obj.addEventListener('click', handlerClick, false) : obj.attachEvent('onclick', handlerClick);
複製代碼

event的總結

我直接上總結了，之前的資料常說的，Firefox瀏覽器只認識監聽綁定的函數的第一個參數event，而IE8如下只認識window.event；

如今通過測試，要糾正一點就是，Firefox瀏覽器如今也支持window.event了。估計是版本比較老的火狐纔不支持吧

因此如今惟一特立獨行的就是讓人苦惱的IE8（含8）如下的了。因此時至今日的新的總結就是：

方式一

• 只有ie8如下（含8）只認識window.event，其餘瀏覽器都支持window.event和句柄第一個參數event（恰好與window.event同名而已）
• 這種綁定方式，只須要寫個event就夠了，通吃！雖然本質上要知道ie8如下是當作window.event，只是省略了window

方式二

• 能夠傳參window.event(可省略window)，也能夠不傳參，直接在函數裏用window.event(可省略window)。 畢竟全部瀏覽器都認識window.event

方式三

• ie8如下（含8）不支持函數第一個參數是event的
• 因此統一不寫第一個參數event，直接在代碼裏用event就行了。由於你們都支持window.event

方式四

• 任何一種方式都支持，能夠是綁定函數帶第一個參數event也能夠是不帶第一個參數直接寫window.event（可省略window）
• 在這種方式裏很特殊，就算是IE8如下的都支持第一個參數event

大總結

之後要用event的話，全部瀏覽器統一當作window.event來處理就好了。火狐通常會自動更新爲最新版的，因此前的顧慮基本上沒有了。