BOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中。无论指定事件处理程序时使用什 18么方法（DOM0级或DOM2级），都会传入event对象。来看下面的例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(event){alert(event.type);
//"click"};
btn.addEventListener("click", function(event){alert(event.type);
//"click"}, false);
这个例子中的两个事件处理程序都会弹出一个警告框，显示由event.type属性表示的事件类型。这个属性始终都会包含被触发的事件类型，例如”click”（与传入 addEventListener()和 removeEventListener()中的事件类型一致）。
在通过HTML特性指定事件处理程序时，变量event中保存着event对象。请看下面的例子。
【实现事件跨浏览器的使用】以这种方式提供event对象，可以让HTML特性事件处理程序与JavaScript函数执行相同的操作。
event对象包含与创建它的特定事件有关的属性和方法。触发的事件类型不一样，可用的属性和方法也不一样。不过，所有事件都会有下表列出的成员。
文章图片
IE中的事件对象 与访问DOM中的event对象不同，要访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。来看下面的例子。
var btn = document.getElementById("myBtn");
btn.onclick = function(){var event = window.event;
alert(event.type);
//"click"};
在此，我们通过window.event取得了event对象，并检测了被触发事件的类型（IE中的type属性与DOM中的type属性是相同的）。可是，如果事件处理程序是使用attachEvent()添加的，那么就会有一个event对象作为参数被传入事件处理程序函数中，如下所示。
var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){alert(event.type);
//"click"});
在像这样使用attachEvent()的情况下，也可以通过window对象来访问event对象，就像使用DOM0级方法时一样。不过为方便起见，同一个对象也会作为参数传递。
如果是通过HTML特性指定的事件处理程序，那么还可以通过一个名叫event的变量来访问event对象（与DOM中的事件模型相同）。再看一个例子。
IE的event对象同样也包含与创建它的事件相关的属性和方法。其中很多属性和方法都有对应的或者相关的DOM属性和方法。与DOM的event对象一样，这些属性和方法也会因为事件类型的不同而不同，但所有事件对象都会包含下表所列的属性和方法。
文章图片
跨浏览器的事件对象 虽然DOM和IE中的event对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。IE中event对象的全部信息和方法DOM对象中都有，只不过实现方式不一样。不过，这种对应关系让实现两种事件模型之间的映射非常容易。可以对前面介绍的EventUtil对象加以增强，添加如下方法以求同存异。
var EventUtil = {
addHandler:function (element,type,handler) {
if (element.addEventListener){
element.addEventListener(type,handler,false);
}else if (element.attachEvent){
element.attachEvent(type,handler);
}else {
element["on"+type] = handler;
}
},
getEvent:function (event) {
return event ? event :window.event;
},
getTarget:function (event) {
return event.target || event.srcElement;
},
preventDefault: function (event) {
if (event.preventDefault){
event.preventDefault();
}else {
event.returnValue = https://www.it610.com/article/false;
}
},
removeHandler:function (element,type,handler) {
if (element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if (element.detachEvent){
element.detachEvent(type,handler);
}else {
element["on"+type] = null;
}
},
stopPropagation:function (event) {
if (event.stopPropagation){
event.stopPropagation();
}else {
event.cancelBubble = true;
}
}
}
