js中获取事件对象的方法小结
63 浏览量
2020-12-01
15:46:52
上传
评论
收藏 89KB PDF 举报
js中获取事件对象的方法小结中获取事件对象的方法小结
代码如下:
var evt = window.event || arguments[0];
下面分三种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。
1，第一种添加事件的方式，直接在，第一种添加事件的方式，直接在html的属性中写的属性中写JS代码代码
代码如下:
<div onclick=”alert(4);”>Div1 Element</div>
大概这是上世纪90年代的写法，那时候直接把js代码写在网页中很普遍，也许那时候的js并不太重要，只是用来做做验证或一
些花哨的效果而已。如何在这种添加事件方式下获取到事件对象？IE中很简单，因为event是作为全局对象的，所以直接使用
event即可，如下
代码如下:
<div onclick=”alert(window.event.type);”>Div1 Element</div>
点击该Div后，IE中会弹出’click’字符的信息框。说明事件对象获取到了，如果在 Opera/Safari/Chrome 中也测试了，会发现效
果和IE一样，说明 Opera/Safari/Chrome 中也支持IE方式( window.event )获取事件对象。
Firefox中会报错，提示：window.event is undefined，说明Firefox不支持IE方式获取事件对象而是以句柄的第一个参数传入
的，文章开头意见提到了。
上面的用 window.event 来获取事件对象，其实window可以省略的，就像使用alert而不是window.alert一样。如
代码如下:
<div onclick=”alert(event.type);”>Div1 Element</div>
在 IE/Opera/Safari/Chrome 中测试，和刚刚不会有什么区别。在Firefox中再测，会有个惊喜，你会发现居然弹出的是”click”信
息框，而不是”undefined”。
两次测试区别仅仅一个用window.event.type，一个用event.type。这个问题下面详细讨论。
下面用句柄第一个参数来获取事件对象，可以把onclick属性的值想象成一个匿名函数，onclick属性值的字符串实际上都是这
个匿名函数内的js代码。
既然这样，我们就可以通过Function的一个属性argumengs获取到该匿名函数的第一个参数，而该参数就是事件对象。如
代码如下:
<div onclick=”alert(arguments[0].type);”>Div1 Element</div>
IE中会报错，提示：arguments.0.type为空或不是对象
Firefox/Opera/Safari/Chrome 中会弹出”click”内容的信息框，说明他们都支持事件对象作为句柄第一个参数传入。从侧面也说
明了 Opera/Safari/Chrome 不仅支持W3C标准方式获取事件对象，同时也兼容了IE方式获取事件对象。
既然知道onclick对应的是一个匿名函数，我们不妨把该匿名函数打印出来看看，只需以下代码
代码如下:
<div onclick=”alert(arguments.callee);”>Div1 Element</div>
在各浏览器中点击该Div，结果如下：
IE6/7/8 :
function onclick(){ alert(arguments.callee);}
IE9 :
function onclick(event){ alert(arguments.callee);}
Firefox / Safari :
function onclick(event) { alert(arguments.callee);}
Chrome :
function onclick(evt) { alert(arguments.callee);}
资源评论
