e=e||window.event用法细节讨论

事件对象的获取很简单,IE事件中事件对象作为全局对象window.event存在,firefox中则是作为句柄(handler)的第一个参数传入内的

var evt=window.event||arguments[0];

四种添加事件的方式讨论

1.直接在html属性中写js代码

Div1 Element

大概这是上世纪90年代的写法,那时候直接把js代码写在网页中很普遍,也许那时候的js并不太重要,只是用来做做验证或一些花哨的效果而已。如何在这种添加事件方式下获取到事件对象?IE中很简单,

因为event是作为全局对象的,所以直接使用event即可,如下

Div1 Element

单击div之后,弹出信息框,说明事件对象已经被获取
fireFox中回报错,因为不支持IE方式获取事件对象而是以句柄的第一个参数传入的

Div1 Element

在 IE/Opera/Safari/Chrome 中测试,和刚刚不会有什么区别。在Firefox中再测,会有个惊喜,你会发现居然弹出的是"click"信息框,而不是"undefined"。

两次测试区别仅仅一个用window.event.type,一个用event.type。这个问题下面详细讨论。

下面用句柄第一个参数来获取事件对象,可以把onclick属性的值想象成一个匿名函数,onclick属性值的字符串实际上都是这个匿名函数内的js代码。
既然这样,我们就可以通过Function的一个属性argumengs获取到该匿名函数的第一个参数,而该参数就是事件对象。如

Div1 Element

IE中会报错,提示:arguments.0.type为空或不是对象
Firefox/Opera/Safari/Chrome 中会弹出"click"内容的信息框,说明他们都支持事件对象作为句柄第一个参数传入。从侧面也说明了 Opera/Safari/Chrome 不仅支持W3C标准方式获取事件对象,

同时也兼容了IE方式获取事件对象。

2.第二种添加事件的方式,定义一个函数,赋值给html元素的onxxx属性


Div2 Element

先定义函数clk,然后赋值给onclick属性,这种方式也应该属于上世纪90年代的流行写法。比第一种方式好的是它把业务逻辑代码都封装在一个函数里了,使HTML代码与JS代码稍微有点儿分离,

不至于第一种那么紧密耦合。

如何在这种方式(clk函数内)中获取事件对象?IE中使用全局对象event仍然没问题,如:

3.第三种添加事件的方式,使用element.onxxxx

Div3 Element

这种方式也比较早期,但好处是可以将JS与HTML完全分离,但前提是需要给HTML元素提供一个额外的id属性(或其它能获取该元素对象的方式)。

这种方式添加事件IE6/7/8只支持window.event不支持参数传入,Firefox只支持参数传入不支持其它方式。IE9/Opera/Safari/Chrome 两种方式都支持。

4.第四种添加方式,使用addEventListener或IE专有的attachEvent

Div4 Element

这是目前推荐的方式,较前两种方式功能更为强大,可以为元素添加多个句柄(或称响应函数),支持事件冒泡或捕获,前三种方式默认都是冒泡。当然IE6/7/8仍然没有遵循标准而使用了自己专有的attachEvent,且不支持事件捕获。IE9 中已经支持addEventListener了。

e=e||window.event用法细节讨论_第1张图片
Paste_Image.png

首先:我们进行ie和其他浏览器的判断
ie的document对象有一个all属性,它的里面存放了页面的所有标签,而其它浏览器是没有的,所以在ie中,事件对象的传播会绑定在全局的windows上,所以ie浏览器肯定是都支持window.event的
其次:特殊的firefox
firefox只支持事件对象作为参数传入,而这又恰恰是ie6/ie7/ie8所无法实现的,所以可以成功的区分这两类,写个实例进行测试的话,如下:

var btn = document.getElementById('btn');//一个按钮
btn.onclick = function(event){//给btn绑定一个点击事件
//其他浏览器会在点击发生的时候,把事件对象当作参数传递过来
alert('其他浏览器:' + event);
//在ie浏览器中,这个event变量是空,它会在全局的window上
alert('ie浏览器:' + window.event);
}

最后,就是ie9/chrome/opera/safari,则两种方式都支持,仅凭这点很难判定浏览器类型
但是,只要写上var e=event?event||window.event,我们的确是可以保证各浏览器的兼容的,你说对么

你可能感兴趣的:(e=e||window.event用法细节讨论)