myrtis
2015-09-15 16:35
<!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>
存在两个错误,第一个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>
DOM事件探秘
99545 学习 · 1197 问题
相似问题