Javascript：为什么我会收到此 Uncaught TypeError：无法读取 null 的属性“addEventListener”？

Question

我正在尝试注册一个事件处理程序，当按钮触发单击事件时，它将一个元素附加到 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);

但我不断得到：

未捕获的类型错误：无法读取 null 的属性“addEventListener”

为什么会发生这种情况

浏览器： 铬

Answer 1

正如您所说，在声明时script已加载到标签中head

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

DOM执行后， id中没有元素evt。

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

当初始 HTML 文档完全加载和解析后，将触发 DOMContentLoaded 事件，无需等待样式表、图像和子框架完成加载。一个非常不同的事件 - load - 应该仅用于检测完全加载的页面。人们在 DOMContentLoaded 更合适的情况下使用 load 是一个非常普遍的错误，所以要小心。

代码：

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