首先,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 returnedEvent
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。