<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>跨瀏覽器事件處理</title>
<script?type="text/javascript">
var?eventUtil?=?{
????????????//?添加句柄
????????????addHandler:function(element,type,handler){
????????????????if(element.addEventListener){
????????????????????element.addEventListener(type,handler,false);
????????????????}else?if(element.attachEvent){
????????????????????element.attachEvent('on'+type,handler);
????????????????}else{
????????????????????element['on'+type]=handler;
????????????????}
????????????},
????????????//?刪除句柄
????????????removeHandler:function(element,type,handler){
????????????????if(element.removeEventListener){
????????????????????element.removeEventListener(type,handler,false);
????????????????}else?if(element.detachEvent){
????????????????????element.detachEvent('on'+type,handler);
????????????????}else{
????????????????????element['on'+type]=null;
????????????????}
????????????}
????????}
????????function?showMes(){
????????????alert("跨瀏覽器的click事件");
????????}
????????var?btn5=document.getElementById("btn");
????????eventUtil.addHandler(btn,'click',showMes);
</script>
</head>
<body>
<div>
<input?type="button"?id="btn"?value="按鈕"?>
</div>
</body>
</html>
2015-09-15
存在兩個錯誤,第一個js必須在整個文檔加載完畢才能執行，如果要寫在頭部，請用window.onload=function(){}
第二個錯誤：完全是拼寫錯誤你的代碼出現了btn5,當然關鍵是第一個錯誤，是致命的。所以你應該這樣寫
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>跨瀏覽器事件處理</title> ?<script?type="text/javascript"> window.onload?=?function(){ var?eventUtil?=?{ ????????????//?添加句柄 ????????????addHandler:function(element,type,handler){ ????????????????if(element.addEventListener){ ????????????????????element.addEventListener(type,handler,false); ????????????????}else?if(element.attachEvent){ ????????????????????element.attachEvent('on'+type,handler); ????????????????}else{ ????????????????????element['on'+type]=handler; ????????????????} ????????????}, ????????????//?刪除句柄 ????????????removeHandler:function(element,type,handler){ ????????????????if(element.removeEventListener){ ????????????????????element.removeEventListener(type,handler,false); ????????????????}else?if(element.detachEvent){ ????????????????????element.detachEvent('on'+type,handler); ????????????????}else{ ????????????????????element['on'+type]=null; ????????????????} ????????????} ????????} ????????function?showMes(){ ????????????alert("跨瀏覽器的click事件"); ????????} ????????var?btn=document.getElementById("btn"); ????????eventUtil.addHandler(btn,'click',showMes); } </script> </head> <body> <div> <input?type="button"?id="btn"?value="按鈕"?> </div> </body> </html>或者這樣
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>跨瀏覽器事件處理</title> </head> <body> <div> <input?type="button"?id="btn"?value="按鈕"?> </div> <script?type="text/javascript"> var?eventUtil?=?{ ????????????//?添加句柄 ????????????addHandler:function(element,type,handler){ ????????????????if(element.addEventListener){ ????????????????????element.addEventListener(type,handler,false); ????????????????}else?if(element.attachEvent){ ????????????????????element.attachEvent('on'+type,handler); ????????????????}else{ ????????????????????element['on'+type]=handler; ????????????????} ????????????}, ????????????//?刪除句柄 ????????????removeHandler:function(element,type,handler){ ????????????????if(element.removeEventListener){ ????????????????????element.removeEventListener(type,handler,false); ????????????????}else?if(element.detachEvent){ ????????????????????element.detachEvent('on'+type,handler); ????????????????}else{ ????????????????????element['on'+type]=null; ????????????????} ????????????} ????????} ????????function?showMes(){ ????????????alert("跨瀏覽器的click事件"); ????????} ????????var?btn=document.getElementById("btn"); ????????eventUtil.addHandler(btn,'click',showMes); </script> </body> </html>