看了跟不看没区别的文章—摒弃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来处理就好了。火狐通常会自动更新为最新版的，因此前的顾虑基本上没有了。