开发者问题收集

Javascript:为什么我会收到这个未捕获的类型错误:无法读取 null 的属性“addEventListener”?

2015-07-07
22822

我正在尝试注册一个事件处理程序,当按钮触发点击事件时,该事件处理程序会将一个元素附加到 DOM 中,例如

var b = document.getElementById('evt');

var eventDemo = function(event) {

    console.log('I handled the event');
    console.log(event);
    console.log(Object.prototype.toString.call(event)); 

var imgElement = document.createElement('img');
imgElement.src = 'http://lorempixel.com/150/150/';
document.body.appendChild(imgElement);

};

b.addEventListener('onclick', eventDemo, false);

但我一直收到:

Uncaught TypeError: Cannot read property 'addEventListener' of null

为什么会发生这种情况

浏览器:chrome

3个回答

正如您所说, script 已加载到 head 标记中,当执行语句

var b = document.getElementById('evt');

时, DOM 中没有具有 id evt 的元素。

使用 DOMContentLoaded 事件在元素上添加事件侦听器。这将在 DOM 完全加载后运行。

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event - load - should be used only to detect a fully-loaded page. It is an incredibly popular mistake for people to use load where DOMContentLoaded would be much more appropriate, so be cautious.

代码:

document.addEventListener("DOMContentLoaded", function(event) {
    var b = document.getElementById('evt');
    b.addEventListener('click', eventDemo, false);
});
Tushar
2015-07-07

错误本身就说明了一切!您没有任何 id 为“evt”的 html 元素。如果您确定您有一个 id 为“evt”的元素,那么请使用下面给出的 $(document).ready ,这样,您的 js 就会在 html 元素加载时执行。

$(document).ready(function(){
var b = document.getElementById('evt');

var eventDemo = function(event) {

    console.log('I handled the event');
    console.log(event);
    console.log(Object.prototype.toString.call(event)); 

var imgElement = document.createElement('img');
imgElement.src = 'http://lorempixel.com/150/150/';
document.body.appendChild(imgElement);

};

b.addEventListener('onclick', eventDemo, false);
});
Hari Ram
2015-07-07

当此脚本运行时,id 为“evt”的元素未定义。有两种可能性:

  1. 您拼错了 id 或忘记添加它,请仔细检查
  2. 您在页面呈现之前加载了此代码。您说,您从 script.js 加载此脚本,因此它可能发生在 <head> 中。但是当脚本加载时, <body> 仍然没有加载。

将此脚本添加到页面底部,或者更好的方法是使用 DOMContentLoaded 事件:

document.addEventListener("DOMContentLoaded", function(event) { 
  //place all your code here
});

并且,正如有人已经提到的,该事件称为 click ,而不是 onclickonclick 是一个 DOM 属性,相当于 HTML 中的 addEventListener

如果您碰巧使用 jQuery,那么方便的包装器是 $(document).ready(function() { /* place hode here */ });

Liglo App
2015-07-07