关于IE浏览器上一些事件对象的问题
浏览器绑定事件处理程序有三种方法,但是关于这几种方法有一些疑惑。
方法一:通过 HTML 特性来绑定事件处理程序
在除了IE浏览器下其他的浏览器,通过HTML特性绑定事件处理程序,必须显式的在HTML特性中给事件处理函数传递一个名为 'event' 的参数,否则讲无法访问事件对象。
然而在 IE 下情况有一些特殊:
例如,下面这段代码运行在 IE 下
<button id="myBtn" onClick="clickBtn(event)"/>
<script type="text/javascript">
function clickBtn(event){
console.log(event);//[object MouseEvent]
console.log(window.event);//[object MSEventObj]
}
</script>
很明显,这里的 event 和 window.event 不是一个对象,我尝试着删除了HTML特性中传入的 event 参数。
<button id="myBtn" onClick="clickBtn()"/>
function clickBtn(event){
console.log(event);//undefined
console.log(window.event);//[object MSEventObj]
}
这次可以看出来,事件处理函数的参数 event 对应的是HTML特性中传入的参数,而实际的事件对象被绑定在了 window.event 上。
方法二:使用 DOM0 级绑定事件处理程序
<button id="myBtn" />
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
console.log(event);//[object MouseEvent]
console.log(window.event);//[object MSEventObj]
};
这次可以看出来,事件处理函数的参数 event 和在HTML特性中的参数event是一致的,而实际的事件对象仍然被绑定在 window.event 上。
方法三:使用 IE 的事件注册函数来绑定事件处理程序
<button id="myBtn" />
var btn = document.getElementById("myBtn");
btn.attachEvent('onclick', function(event){
console.log(event);//[object MSEventObj]
console.log(window.event);//[object MSEventObj]
});
这回可以很明显的看到,事件处理函数的参数应该是 window.event 的一份拷贝。
那么问题就在于,在前面两种方法中, 事件处理函数的参数 event 到底是一个什么样的对象呢?
CtrlZ
9 years, 3 months ago