Question

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

但我一直在接受：

未捕获的TypeError：无法读取null
的属性'addEventListener'

为什么会发生这种情况

浏览器：chrome

Answer 1

正如您所说script已加载head标记，截至声明时

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

已执行，DOM中没有ID为evt的元素。

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

当初始HTML文档已完全加载并解析时，会触发DOMContentLoaded事件，而无需等待样式表，图像和子帧完成加载。一个非常不同的事件 - 加载 - 应该仅用于检测完全加载的页面。对于人们来说，使用负载是一个非常普遍的错误，其中DOMContentLoaded会更合适，所以要小心。

代码：

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

Answer 2

错误本身清楚地解释了！你没有任何带有'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);
});

Answer 3

在此脚本运行时，未定义id为'evt'的元素。有两种可能性：

你拼错了id或者忘记添加它，仔细检查它
在呈现页面之前加载此代码。你说，你从script.js加载这个脚本，所以它可能发生在<head>。但是当加载脚本时，<body>仍然不是。

在页面底部添加此脚本，或者更好地使用DOMContentLoaded事件：

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

并且，正如有人已经提到的那样，该事件被称为click，而不是onclick。 onclick是一个DOM属性，比如HTML中的等价物addEventListener。

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

Answer 4

来自mdn

element = document.getElementById(id);

元素是对Element对象的引用，如果具有指定ID的元素不在文档中，则 null 。

在您的情况下，找不到b并返回null。 Null不是一个对象，所以它不能有addEventListener

Answer 5

我遇到了同样的错误，我在同一天浪费了2天。后来发现同一个应用程序在firefox上运行正常。所以我尝试将我的chrome版本更新到53.x.x. 现在没有出现这样的问题。也许这对你也有帮助:)）

Javascript：为什么我得到这个Uncaught TypeError：无法读取null的属性'addEventListener'？

5 个答案: