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

檢查了幾遍就是運行不了， Cannot read property 'addEventListener' of null

錯誤，?Cannot read property 'addEventListener' of null

hello清風

2016-04-21

源自：DOM事件探秘 2-4

關(guān)注問題我要回答

27828

操作

收起

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>