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

檢查了幾遍就是運(yùn)行不了， Cannot read property 'addEventListener' of null

錯(cuò)誤，?Cannot read property 'addEventListener' of null

hello清風(fēng)

2016-04-21

源自：DOM事件探秘 2-4

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

27864

操作

收起

2 回答

hello清風(fēng) 提問者
2016-04-22

終于找出來了問題了。

1、removeHandler這個(gè)方法上面的花括號(hào)后面少了一個(gè)逗號(hào)，這個(gè)影響挺大的

2、我把script放在head中引起的。html元素是自上而下渲染的，如果放在head中，這時(shí)候body還沒有被渲染，javascript代碼操作的對(duì)象都沒有，報(bào)錯(cuò)是很正常的。

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>0421——DOM0級(jí)與DOM2級(jí)處理事件</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級(jí)處理事件
var?btn2=document.getElementById("btn2");
var?btn=document.getElementById("btn");
btn2.onclick=function(){
alert('時(shí)間2號(hào)');};
//btn2.onclick=null;

//DOM2級(jí)處理事件
//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級(jí)處理事件兼容chrome和火狐
}else?if(element.attachEvent){
element.attachEvent('on'+type,handler);
//DOM2級(jí)處理事件兼容IE8以及更早的瀏覽器版本，只支持事件冒泡
}else{
element['on'+type]=handler;
//DOM0級(jí)處理事件element.onclick等價(jià)于element['onclick']
}
},//這個(gè)都好很重要，一定不要忘了。

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 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

hello清風(fēng) 提問者
2016-04-21

<!DOCTYPE?html>
<html>
<head>
<meta?charset="utf-8">
<title>0421_DOM0級(jí)與DOM2級(jí)處理事件</title>
<script?type="text/javascript">

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

//DOM0級(jí)處理事件
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級(jí)處理事件兼容chrome和火狐
}else?if(element.attachEvent){
element.attachEvent('on'+type,handler);
//DOM2級(jí)處理事件兼容IE8以及更早的瀏覽器版本，只支持事件冒泡
}else{
element['on'+type]=handler;
//DOM0級(jí)處理事件element.onclick等價(jià)于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>