JS事件对象获取

179天前 · 代码 · 279次阅读

首先,event对象有两种

  • DOM的event对象
  • IE的event对象

两者的区别在于,IE的event对象是保存在window.event属性中的,而DOM的event是点击时引擎实例化出来的一个event对象,两者有着本质上的区别。

那么获取event对象又有几种方式。

HTML事件处理

<button id="btn" onclick="handleClick(event)">Click me</button>
<script>
function handleClick(event) {
    //...
}
</script>

此时,如果是在IE浏览器下面,传入的event就是window.event;如果是在其他支持DOM事件的浏览器下,就会由引擎新实例化一个event对象再传入

如果我在handleClick的参数列表里面没有写上event这个参数的话,在支持DOM事件的浏览器中,我还可以通过arguments.callee.caller.arguments[0]来获取event对象。而IE浏览器下,直接使用window.event可以达到一样的效果。

DOM0级,2级事件处理

let btn = document.querySelector('#btn');

let handleClick = function(e) {
    let evt = e || window.event;
}

此时支持DOM事件的浏览器的传入逻辑与刚刚HTML事件处理是一样的。而IE就不会传递这个参数,只能通过window.event来获取当前事件event。

关于window.event的一些说明

在IE以外的浏览器中,使用window.event不是一种明智之举。首先是其已经被废弃了,在MDN文档上能找到详细的说明

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

其次,它可能没那么准确。

Note: This property can be fragile, in that there may be situations in which the returned Event is not the expected value. In addition, Window.event is not accurate for events dispatched within shadow trees.

在非IE浏览器中,如果你直接访问window.event会返回undefined,只有在事件处理函数中调用才会返回,而返回的也是同一个由引擎新实例化的event对象。所以,下面的代码跑出来的结果会是true

let btn = document.querySelector('#btn');

let handleClick = function(event) {
    console.log(event);
    console.log(window.event);
    console.log(window.event === event);
}

btn.addEventListener('click', handleClick, false);

在IE浏览器下,因为电脑上装不上IE,所以无法进一步验证QAQ。

总结

这一块感觉红宝书也没有说的很明白,网上找了各种资料也全是转载转载转载。最后还是看了MDN英文文档才搞明白(中文文档没更新QAQ)。

以后还是要坚定一点,遇事不决MDN。

👍 10

js 事件 event

最后修改于179天前

评论

贴吧 狗头 原神 小黄脸
收起

贴吧

狗头

原神

小黄脸

目录

avatar

季悠然

寻找有趣的灵魂

127

文章数

1954

评论数

3

分类

好热啊

arknights!

凡是过去,皆为序章。

莎士比亚

107