浏览器兼容dom事件的测试为啥失败了?
以下代码为什么浏览器兼容部分测试失败?问题在哪?
<!doctype <!DOCTYPE html>
<html>
<head>
<title>dom</title>
<script type="text/javascript" >
function showmes(){
alert("this message is shown")
}
var btn2=document.getElementById("btn2");
btn2.onclick=showmes;
</script>
</head>
<body>
<input type="button" id="btn1" value="btn1" onclick="showmes()"></input>
<input type="button" id="btn2" value="btn2"></input>
<input type="button" id="btn3" value="btn3"></input>
<input type="button" id="btn4" value="btn4IE"></input>
<input type="button" id="btn5" value="btn5封装(解决浏览器兼容)"></input>
<script>
function showmes(){
alert("this message is shown")
}
// DOM0级的操作方法
var btn2=document.getElementById("btn2"); // 载入事件
btn2.onclick=showmes; // 添加事件
btn2.onclick=null; // 删除事件
// DOM2级的操作方法,可以添加多个事件处理程序,IE8及以下浏览器不支持
var btn3=document.getElementById("btn3"); // 载入事件
btn3.addEventListener("click",showmes,false); // 添加事件
btn3.addEventListener("click",function(){
alert(this.value); // this可以引用自身这个元素,引用被触发的元素
},false)
//btn3.removeEventListener("click",showmes,false); // 删除事件
// IE事件处理方法,仅IE浏览器支持
var btn4=document.getElementById("btn4");
btn4.attachEvent("onclick",showmes);
btn4.detachEVent("onclick",showmes); // 删除事件
var btn5=document.getElementById("btn5");
//跨浏览器事件处理
var EventUnit{ // 封装事件对象
addEvent:function(element,type,handler){ // 添加事件函数
if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else if(element.addEventListener){
element.addEventListener(type,handler,false);
}else{
element["on"+type]=handler;
}
}
delEvent:function(element,type,handler){ // 删除事件函数
if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else{
element["on"+type]=null;
}
}
}
EventUnit.addEvent(btn5,"click",showmes);
</script>
</body>
</html>