跨浏览器事件处理，能力检测：IE事件,DOM0级，DOM2级_自己编写跨浏览器事件处理代码主要依赖能力检测,检测顺序-优快云博客

本文链接：https://blog.youkuaiyun.com/u013415189/article/details/52055439

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding: 0;font-size: 14px}
ul{list-style:none;}
li{float:left;}
a{text-decoration:none;display: block;height: 30px;line-height: 30px;width: 100px;background-color: #CCC;margin-bottom: 1px;text-align:center;}
a:hover{background-color: #F60;color: #FFF}

</style>
</head>
<body>
<ul id="oul">
<li><a id="index" href="#">首页</a></li>
<li><a id="news" href="#">新闻</a></li>
<li><a id="afterMarket" href="#">售后</a></li>
<li><a id="contact" href="#">联系</a></li>
</ul>

<script type="text/javascript">
window.οnlοad=function(){
/*跨浏览器事件处理，能力检测：IE事件,DOM0级，DOM2级*/
var eventUtil={
addHandler:function(element,type,handler){
if(element.addEventListener){
//DOM2级
element.addEventListener(type,handler,false)
}else if(element.attachEvent){
//IE事件处理
element.attachEvent("on"+type,handler)
}
else{
//DOM0级
element["on"+type]=handler;
}
},
removeHandler:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false)
}else if(element.attachEvent){
element.detachEvent("on"+type,handler)
}
else{
element["on"+type]=null;
}
}
}
var oul=document.getElementById("oul");
var oli=oul.getElementsByTagName("li");
for(var i=0;i<oli.length;i++){
oli[i].index=i;
var oa=oli[i].getElementsByTagName("a");
eventUtil.addHandler(oa[0],"click",showInfo);
}
function showInfo(event){
//type属性用于获取事件类型
alert(event.type);

if(event.target.id){
//点击非图标区域时，可直接获取到对应的a标签的ID
var btnId=event.target.id;
}else{
//点击图标时，event.target为图标，就找不到对应的a标签的ID
var btnId=event.target.parentNode.id;
}
//target属性用于获取事件目标
alert(btnId);
}
}

</script>
</body>
</html>