<!--跨浏览器事件兼容-->
<!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>
