                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /DOM事件探秘

检查了几遍就是运行不了， Cannot read property 'addEventListener' of null

错误， Cannot read property 'addEventListener' of null

hello清风

2016-04-21

源自：DOM事件探秘 2-4

关注问题我要回答

27655

操作

收起

2 回答

hello清风提问者
2016-04-22

终于找出来了问题了。

1、removeHandler这个方法上面的花括号后面少了一个逗号，这个影响挺大的

2、我把script放在head中引起的。html元素是自上而下渲染的，如果放在head中，这时候body还没有被渲染，javascript代码操作的对象都没有，报错是很正常的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0421——DOM0级与DOM2级处理事件</title>

</head>

<body>
<input type="button" value="按钮一" id="btn1" onclick="showmen()">

<input type="button" value="按钮二" id="btn2">

<input type="button" value="按钮三" id="btn">
<script type="text/javascript">
function showmen(){
alert("Hello world!");
}

//DOM0级处理事件
var btn2=document.getElementById("btn2");
var btn=document.getElementById("btn");
btn2.onclick=function(){
alert('时间2号');};
//btn2.onclick=null;

//DOM2级处理事件
//btn3.addEventListener('click',showmen,false);
//btn3.attachEvent('onclick',showmen);

//解决浏览器兼容性问题
var eventUtil={
//添加句柄
addHandler:function(element, type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
//DOM2级处理事件兼容chrome和火狐
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
//DOM2级处理事件兼容IE8以及更早的浏览器版本，只支持事件冒泡
}else{
element['on'+type]=handler;
//DOM0级处理事件element.onclick等价于element['onclick']
}
},//这个都好很重要，一定不要忘了。

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;
               }
}
}
eventUtil.addHandler(btn,'click',showmen);

</script>

</body>
</html>

3 回复有任何疑惑可以回复我~

收起回答

hello清风提问者
2016-04-21

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>0421_DOM0级与DOM2级处理事件</title>
<script type="text/javascript">

function showMes(){
alert("Hello world!");
}

//DOM0级处理事件
var btn2=document.getElementById("btn2");
var btn3=document.getElementById("btn3");

//解决浏览器兼容性问题
var eventUtil={
//添加句柄
addHands:function(element,type,handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
//DOM2级处理事件兼容chrome和火狐
}else if(element.attachEvent){
element.attachEvent('on'+type,handler);
//DOM2级处理事件兼容IE8以及更早的浏览器版本，只支持事件冒泡
}else{
element['on'+type]=handler;
//DOM0级处理事件element.onclick等价于element['onclick']
}
}
removeHands: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;
}
}
}
eventUtil.addHands(btn3,'click',showMes);

</script>

</head>
<body>
<input type="button" value="按钮一" id="btn1" onclick="showMes()">

<input type="button" value="按钮二" id="btn2">

<input type="button" value="按钮三" id="btn3">

</body>
</html>