源自：2-4 IE事件处理程序及跨浏览器解决
求大家帮我找错误，跨浏览器事件处理只能实现IE，谷歌上没反应
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>
<input type="button" id="btn1" value="按钮1" onclick="showMessage()"/>
<input type="button" id="btn2" value="按钮2" />
<input type="button" id="btn3" value="按钮3" />
<input type="button" id="btn4" value="按钮4" />
<input type="button" id="btn5" value="按钮5" />
</div>
<script type="text/javascript">
function showMessage(){
alert("第一种事件处理程序：HTML事件处理程序");
}
var btn2=document.getElementById('btn2');
btn2.onclick=function(){
alert("第二种事件处理程序：DOM0级事件处理程序");
}
//btn2.onclick=null;//删除事件
function showMs(){
alert("第三种事件处理程序：DOM2级事件处理程序");
}
var btn3=document.getElementById('btn3');
btn3.addEventListener('click',showMs,false);
btn3.addEventListener('click',function(){
alert(this.value);
},false);
//btn3.removeEventListener('click',showMs,false);//删除事件
var btn4=document.getElementById('btn4');
function showMsg(){
alert("第四种事件处理程序：IE事件处理程序");
}//对谷歌浏览器无效
btn4.attachEvent('onclick',showMsg);
btn4.detachEvent('onclick',showMsg);
//跨浏览器事件处理程序，用封装的方法
//按钮5的JavaScript代码如下：
var btn5=document.getElementById('btn5');
function show(){
alert("第五种事件处理程序：跨浏览器事件处理程序");
}
var EventUtill={
//添加句柄
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;
}
}
}
EventUtill.addHandler(btn5,'click',show);
</script>
</body>
</html>这是我的全部代码，出问题的代码在最后的部分，按钮5的事件实现不了。但是看不出错在哪里，IE上点击按钮5可以，chrome上不行，求查错！
提问者：连枝
2016-11-04 09:47
个回答
-
- zhongdong
- 2016-11-04 14:40:04
因为chrome中
btn4.attachEvent('onclick',showMsg);
btn4.detachEvent('onclick',showMsg);
这两句报错了，所以JS不会往下执行，就没有办法给btn5添加事件
-
- 慕莱坞5027760
- 2016-11-04 14:30:20
调试结果如图 -
- 烟雨非飞
- 2016-11-04 14:27:10
上面讲有理由应该是对的。。attachEvent这个方法在谷歌里面不支持，可能就报错了，并不能继续往下执行，所以就看不到下面正确的语句效果了
-
- 慕莱坞5027760
- 2016-11-04 14:24:41
function showMsg(){
alert("第四种事件处理程序：IE事件处理程序");
}//对谷歌浏览器无效
btn4.attachEvent('onclick',showMsg);
btn4.detachEvent('onclick',showMsg);
//跨浏览器事件处理程序，用封装的方法
去掉这些就好了，估计是有处理不了
-
- 烟雨非飞
- 2016-11-04 13:55:56
<input type="button" value="btn5" id="btn5"/>
可以啊，chrome测过了，没问题啊，就用你的代码，只取最后一部分，注释掉没有用的代码，你把上面代码注释掉试一下。