javascript——事件兼容(部分) 

<!--跨浏览器事件兼容-->
<!DOCTYPE HTML>
<html>
 <head> </head>
 <meta charset="utf-8"> 
 <body>
  <div>
   <a href="http://www.baidu.com" id="al" >Click Me</a>
  </div>
 </body>
<script type="text/javascript">
 var EventUtil={
     addHindler:function (ele,type,func){//添加事件
         if(ele.addEventListener){//除IE8及一下浏览器外兼容
             ele.addEventListener(type,func,false);
         }
         else if(ele.attachEvent){//IE8及以下版本浏览器
             ele.attachEvent("on"+type,func);
         }
         else {ele["on"+type]=func}//兼容所有版本
     },
    removeHindler:function(ele,type,func){//删除绑定事件
        if(ele.removeEventListener){//除IE8及一下浏览器外兼容
            ele.removeEventListener(type,func,false);
        }
        else if (ele.dettachEvent) {//IE8及以下浏览器
            ele.dettachEvent["on"+type]=func;
        }
        else{ele["on"+type]=func;}
    },
    getEvent:function(event){//获取事件event
        return event? event:window.event;//兼容IE获取event
    },
    preventDefault:function(event){//兼容IE阻止事件默认行为
        event.preventDefault? event.preventDefault(): event.returnValue=false;
    },
    getTarget:function(event){//兼容IE获取事件目标
        return event.target||event.srcElement;
    },
    stopPropagation:function(event){//兼容IE停止事件冒泡
        event.stopPropagation ? event.stopPropagation():event.cancelBubble=true;
    },
    getRelatedTarget:function(event){//mouseover 和mouseout有相关元素信息，其他鼠标事件返回null
        if(event.relatedTarget){
            return event.relatedTarget;
        }
        else if(event.fromElement){
            return event.fromElement;
        }
        else if (event.toElement) {
            return event.toElement;
        }
        else
            return null;
    },
    getButton: function (event){//获取鼠标按钮信息，0为左键，1为滚轮，2为右键
        if(document.implementation.hasFeature("MouseEvents","2.0")){
            return event.button;
        }
        else{ 
            switch(event.button){
                case 0:
                case 1:
                case 3:
                case 5:
                case 7:
                 return 0;//将带有左键（主键）按钮的都归为主键
                case 2:
                case 6:
                 return 2;//将带有右键（次键）未带有主键的归为次键
                case 4:
                 return 1//将只有滚轮的归为滚轮
             }
        }
    },

 }
 var al=document.getElementById("al");
 function fun(event){
     event=EventUtil.getEvent(event);
     EventUtil.stopPropagation(event);//停止事件冒泡
     EventUtil.preventDefault(event);//阻止默认行为
    EventUtil.getRelatedTarget(event);
    EventUtil.getButton(event);
 }
 EventUtil.addHindler(al,"click",fun)//添加绑定事件
</script>
</html>

 

posted @ 2016-03-08 21:03  草头萱  阅读(215)  评论(0)    收藏  举报