EventUtil对象之跨浏览器事件对象

基于DOM和IE中的 event对象不同的跨浏览器方案

 

　　由于IE中event对象的全部信息和方法DOM 中都有，所以实现两种时间模型之间的映射还是容易的。

　　在上一篇中的EventUtil对象中加以增强

　　

var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else{
            element.attachEvent("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{
            element.detachEvent("on"+type,handler)
        };
    },
     stopPropagation:function(event){
         if(event.stopPropagation){
             event.stopPropagation();
         }else{
             event.cancelBubble = true;
         }
     }
};

以上为新增了几个为EventUtil对象定义的方法：
1.getEvent()、getTarget()
　　调用：
　　　　var btn = document.getElementById("mybtn");
　　　　btn.onclick = function(event){
　　　　　　event = EventUtil.getEvent(event);  //调用event对象
　　　　　　var target = EventUtil.getTarget(event); //返回事件的目标
　　　　};
2.preventDeafault()
　　调用：

　　var link = document.getElementById("mylink");
　　link.onclick = function(event){
　　　　event = EventUtil.getEvent(event);
　　　　EventUtil.preventDefault(event);  //取消事件的默认行为，此例为取消点击链接的跳转行为
　　}；
3.stopPropagation();
　　调用：
　　var btn = document.getElementById("mybtn");

　　btn.onclick = function(event){
　　　　event = EventUtil.getEvent(event);  
　　　　alert("Clicked");
　　　　EventUtil.stopPropagation(event);  //阻止事件冒泡
　　};

　　document.onclick = function(event){
　　　　alert("Clicked Body");  //不会弹出此警告  会被阻止
　　};
　　由于ie不支持事件捕捉，所以此方法在跨浏览器的情况下，也只是用来阻止事件冒泡。


　　此上为封装的EventUtil对象，用于在跨浏览器代码时使用，希望对大家有帮助！