实现事件跨浏览器的使用

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对象。请看下面的例子。

<input type="button" value="Click Me" onclick="alert(event.type)"/>

以这种方式提供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中的事件模型相同）。再看一个例子。

<input type="button" value="Click Me" onclick="alert(event.type)">

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 = 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;            }        }    }