本文深入解析JavaScript中的事件对象event，涵盖DOM标准与IE浏览器的兼容机制。详细对比HTML内联、DOM0级及DOM2级事件处理程序中event参数的获取方式，并重点剖析IE中attachEvent与DOM0模式下event对象引用不一致的原因及代码验证。
相关阅读：
JavaScript事件学习小结(五）js中事件类型之鼠标事件
https://www.jb51.net/article/86259.htm
JavaScript事件学习小结（一）事件流
https://www.jb51.net/article/86261.htm
javaScript事件学习小结（四）event的公共成员（属性和方法）
https://www.jb51.net/article/86262.htm
JavaScript事件学习小结(二)js事件处理程序
https://www.jb51.net/article/86264.htm
JavaScript事件学习小结（三）js事件对象
https://www.jb51.net/article/86266.htm
事件对象概述
一、事件对象
1、认识事件对象
在浏览器环境中，事件以event对象的形式存在。当触发特定事件时，系统会自动生成一个包含该事件所有相关信息的event对象。这些信息包括触发事件的元素节点、事件类型以及其他与当前事件相关的特定数据。
例如，在鼠标操作中，event对象会记录鼠标的坐标位置；而在键盘操作中，则会记录被按下键位的详细信息。
尽管所有主流浏览器都支持event对象，但其实现机制存在差异。在DOM标准中，event对象必须作为唯一参数传递给事件处理函数；而在IE浏览器中，event对象则是window对象的一个属性。
HTML内联事件中的event
2、html事件处理程序中event
<input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>在HTML内联事件处理程序中，浏览器会创建一个包含局部变量event的函数作用域。开发者可以直接通过event关键字访问当前的事件对象。
DOM标准中的事件对象
3、DOM中的事件事件对象
无论是采用DOM0级还是DOM2级的事件处理程序，event对象都会作为参数直接传入事件处理函数中。
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(event){
console.log("DOM0 & click");
console.log(event.type); //click
}
btn.addEventListener("click", function (event) {
console.log("DOM2 & click");
console.log(event.type); //click
},false);
</script>
</body>IE浏览器中的事件对象机制
4、IE中的事件对象
第一种情况：当通过DOM0级方法（如直接赋值onclick）添加事件处理程序时，event对象作为window对象的一个属性存在，可通过window.event访问。
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.onclick= function () {
var event=window.event;
console.log(event.type); //click
}
</script>
</body>第二种情况：通过attachEvent()方法添加的事件处理程序，event对象会作为参数传入处理函数中。
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
})
</script>
</body>
然而，在实际应用中存在两个值得探讨的问题：
1、在通过DOM0级方法添加的事件处理程序中，虽然可以传入一个event参数，且其type属性与window.event.type一致，但传入的event参数对象与window.event对象并不相等，这是为何？
btn.onclick= function (event) {
var event1=window.event;
console.log('event1.type='+event1.type); //event1.type=click
console.log('event.type='+event.type); //event.type=click
console.log('event1==event?'+(event==event1)); //event1==event?false
}2、在使用attachEvent添加的事件处理程序中，传入的event参数与window.event对象也不相同，其原因是什么？
<body>
<input id="btn" type="button" value="click"/>
<script>
var btn=document.getElementById("btn");
btn.attachEvent("onclick", function (type) {
console.log(event.type); //click
console.log("event==window.event?"+(event==window.event)); //event==window.event?false
})
</script>
</body>以上所述是小编给大家介绍的JavaScript事件学习小结（三）js事件对象的相关知识，希望对大家有所帮助，如果大家想了解更多内容敬请关注本站网站！