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

首页课程实战体系课手记专栏慕课教程

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

来源：2-4 IE事件处理程序及跨浏览器解决

hello清风

2016-04-21 17:35

错误， Cannot read property 'addEventListener' of null

写回答关注

2回答

hello清风: 2016-04-22 11:29:12

终于找出来了问题了。

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>

0 3

hello清风: 2016-04-21 18:59: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>

0 0

DOM事件探秘

DOM事件？本课程会通过实例来给小伙伴们讲解如何使用这些事件

99545 学习 · 1197 问题

查看课程

相似问题

drag.js:4 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null

回答 3

Uncaught TypeError: Cannot set property 'onclick' of null

回答 2

点了登录没反应检查好几遍了

回答 2

为什么会出现Uncaught TypeError: Cannot read property 'css' of undefined 错误

回答 4

if(element.addEventListener) 这行代码流浪器提示我 can't read property "addEventListener" of null ，哪位好心人能帮我解决啊，跪求原因。

回答 2

打开慕课网App查看更多内容