Question

Javascript 无法读取空错误的属性‘addEventListener’

2020-05-08

140

javascript html addeventlistener

我遇到一个问题，在执行脚本时出现错误消息：

Cannot read property 'addEventListener' of null

我的 JavaScript 代码：

var bghtooltipin  = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', mouseOver);
bghtooltipin.addEventListener('mouseout', mouseOut);

我查看了很多故障排除提示，但没有找到任何可以解决我的问题的方法。

Answer 1

无法读取 null 的 addEventListener 属性 ，当您尝试访问 null 的属性时会发生这种情况。此错误仅表示，如果您执行此操作：

myElement.addEventListener("click", function () {
    //some code
});

则 myElement 的定义与您认为的不同。没有任何代码，我无法再提供帮助，但我最好的建议是转到您定义 myElement 的位置。很可能，那一行有问题。

Answer 2

您必须在 body 末尾编写 javascript 或使用 DOMContentLoaded 对其进行初始化。问题是，当您尝试选择元素时，文档尚未完成。

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelector('#elem').addEventListener('click', function() { this.innerText += '!'; });
});
</script>

<button id="elem">Click me</button>