资讯专栏INFORMATION COLUMN

看了跟不看没区别的文章—摒弃e || window.event旧认识

Miyang / 1374人阅读

摘要:前言今天,为表达我对前端的热爱,特此发了一篇小总结。其实这是一种很笼统的说法,因为绑定监听事件的方式不同,可能情况不一样。但是不论怎样,这么写准没错。监听的绑定方式为了方便描述现象。火狐一般会自动更新为最新版的,所以前的顾虑基本上没有了。

前言

今天520,为表达我对前端的热爱,特此发了一篇小总结。实际上你看不看这文章,对你目前来讲,其实也没多大影响,这是我的真心话哈哈

刚学前端的时候,有很多教程或者资料,都会教绑定监听事件函数时,可能会看到这么一句代码

function (e) {
    var e = e || window.event;
} 

当时给你指导的人/资料都会跟你解释,这是为了解决浏览器兼容性,为了兼容ie和Firefox。其实这是一种很笼统的说法,因为绑定监听事件的方式不同,可能情况不一样。但是不论怎样,这么写准没错。

然而时至今日(2019-05-20),这种处理是否已经还有必要呢,毕竟技术的东西变化很快,一些老旧的知识,是否该摒弃,别让其再迷惑你的脑袋,让代码更加累赘。

监听的绑定方式

为了方便描述e = e || window.event现象。先在这里总结绑定监听为四类,分别举例如下:



<div onclick="console.log()">div>


<div onclick="handlerClick()">div>
// 方式三
// 在js里直接绑定
document.getElementById("example").onclick = function() {...}
// 方式四
// 用绑定事件函数绑定
var obj = document.getElementById("example");
function handlerClick () {...}
// ie8含8以下用attachEvent,监听事件要带"on"
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来处理就行了。火狐一般会自动更新为最新版的,所以前的顾虑基本上没有了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/6738.html

相关文章

  • 前端面试(知识点)整理(一)

    摘要:接受个参数事件类型,是否冒泡,是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题:假设高度已知,请写出三栏布局 ,其中左栏、右栏宽度各为300px,中间自适应。 解决方案一:使用浮动布局` Document ...

    zhichangterry 评论0 收藏0
  • 前端面试(知识点)整理(一)

    摘要:接受个参数事件类型,是否冒泡,是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题:假设高度已知,请写出三栏布局 ,其中左栏、右栏宽度各为300px,中间自适应。 解决方案一:使用浮动布局` Document ...

    Songlcy 评论0 收藏0
  • 前端面试(知识点)整理(一)

    摘要:接受个参数事件类型,是否冒泡,是否阻止浏览器的默认行为触发上绑定的自定义事件触发元素上绑定事件事件的委托代理的原理以及优缺点。委托代理事件是那些被绑定到父级元素的事件,但是只有当满足一定匹配条件时才会被挪。 一、页面布局 1.问题:假设高度已知,请写出三栏布局 ,其中左栏、右栏宽度各为300px,中间自适应。 解决方案一:使用浮动布局` Document ...

    ThreeWords 评论0 收藏0
  • 前端笔记

    摘要:一严格模式与混杂模式如何触发这两种模式,区分它们有何意义声明位于文档中的最前面的位置,处于标签之前。包含过渡和的也导致页面以标准模式呈现,但是有过渡而没有会导致页面以混杂模式呈现。不存在或形式不正确会导致和文档以混杂模式呈现。 一:HTML+css 1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? Doctype声明位于文档中的最前面的位置,处于标签...

    未东兴 评论0 收藏0
  • 前端笔记

    摘要:一严格模式与混杂模式如何触发这两种模式,区分它们有何意义声明位于文档中的最前面的位置,处于标签之前。包含过渡和的也导致页面以标准模式呈现,但是有过渡而没有会导致页面以混杂模式呈现。不存在或形式不正确会导致和文档以混杂模式呈现。 一:HTML+css 1.Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义? Doctype声明位于文档中的最前面的位置,处于标签...

    binta 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<