关于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 到底是一个什么样的对象呢?

JavaScript

CtrlZ 8 years, 8 months ago

你用的IE9或者IE10?大致上可以这么理解:IE8及以前的IE浏览器使用的是微软自己的事件模型;而IE11(包括Edge)终于实现了w3c标准事件模型;而IE9和IE10正处在过渡阶段,同时兼容两种标准。

keylito answered 8 years, 8 months ago

接着楼上的说。
IE事件模型 将event作为window对象的一个属性存在,当只有事件触发才能取到;
w3c标准事件模型 将event传入到事件处理程序中,参数即可以取到;


 <button id="myBtn" onClick="clickBtn(event)"/>

这种方式属于 HTML事件处理程序 ,这样指定事件处理程序,会把事件对象event封装进去。而在除了IE外的其他浏览器,使用任何一种方式绑定事件,event都会被封装作为参数。

咸腌蛋的超人 answered 8 years, 8 months ago

Your Answer