                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

瀏覽器兼容dom事件的測(cè)試為啥失敗了？

以下代碼為什么瀏覽器兼容部分測(cè)試失?。繂?wèn)題在哪？

<!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級(jí)的操作方法
??var btn2=document.getElementById("btn2");? // 載入事件
??btn2.onclick=showmes;??? // 添加事件
??btn2.onclick=null;?????? // 刪除事件
??// DOM2級(jí)的操作方法，可以添加多個(gè)事件處理程序，IE8及以下瀏覽器不支持
??var btn3=document.getElementById("btn3");?? // 載入事件
??btn3.addEventListener("click",showmes,false);?// 添加事件
??btn3.addEventListener("click",function(){
???alert(this.value);?????????????????????????? // this可以引用自身這個(gè)元素，引用被觸發(fā)的元素
??},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{??????????????????????? // 封裝事件對(duì)象
??????????? addEvent:function(element,type,handler){??????????????? // 添加事件函數(shù)
???????????? 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){??????????????? // 刪除事件函數(shù)
????????????? 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>