事件对象的兼容写法

跨浏览器的事件对象
我们依旧可以通过往EventUtil对象中写一些函数来实现跨浏览器的事件处理。
var EventUtil = {    ①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;
                         }
                     },
                     ④stopPropagation:function(event){
                         if(event.stopPropagation){
                             event.stopPropagation();
                         }else{
                              event.cancelBubble = true;
                         }
                     },
                 };
其中定义了4个函数。
第一个getEvent，它返回对event对象的引用。由于在IE中事件对象的位置不同，可以使用这个方法取得event对象，而不必担心指定事件处理程序的方式。它的使用方法是：

btn.onclick =function(event){
    event = EventUtil.getEvent(event);
};

在兼容DOM的浏览器中,event变量只是简单地传入和返回。而在IE中，event参数是未定义的(undefined),因此就会返回window.event。将这一行代码添加到事件处理程序的开头，就可以确保随时都能使用event对象，而不必担心用户使用的是什么浏览器。

第二个getTarget，它返回事件的目标。
用法：

btn.onclick = function(event0{
   event = EventUtil.getEvent(event);
   var target =  EventUtil.getTarget(event);
};

第三个preventDefault，用于取消事件的默认行为。
用法：

var link =document.getElementByIdx_x("myLink");
link.onclick = function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
};

第四个stopPropagation，只能用来阻止事件冒泡，因为在IE中不支持事件捕获。
用法：

var btn =document.getElementByIdx_x("myBtn");
btn.onclick =function(event){
    alert("Clicked");
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
}
document.body.onclick = function(event){
    alert("Body clicked");
};