TypeError: Cannot read property 'addEventListener' of null

当代码试图在一个空对象上调用 addEventListener 方法时，会抛出 TypeError。这通常意味着需要检查在调用 addEventListener 方法之前，所对应的元素是否已经被正确地加载。

在以下代码中，变量 elem 被设置为 null，但后续代码尝试在 elem 上调用 addEventListener 方法，因此会抛出 TypeError：

var elem = document.getElementById('my-element');
elem = null;
elem.addEventListener('click', function() {
  console.log('click!');
});

可以通过检查元素是否存在来确保代码不会在空的或不存在的元素上调用 addEventListener 方法：

var elem = document.getElementById('my-element');
if (elem) {
  elem.addEventListener('click', function() {
    console.log('click!');
  });
}

在上述代码中，如果 elem 未找到对应的元素，则 elem 的值为 null，代码会跳过 addEventListener 的调用，不会抛出 TypeError。

更好的实践是在 DOM 内容加载完成后再进行操作。使用 window.onload 或 DOMContentLoaded 等事件来确保元素已完全加载：

document.addEventListener('DOMContentLoaded', function() {
  var elem = document.getElementById('my-element');
  elem.addEventListener('click', function() {
    console.log('click!');
  });
});

以上代码会在 DOM 内容加载后执行，确保 my-element 已加载，避免了 TypeError 的问题。

总之，当你遇到 TypeError: Cannot read property 'addEventListener' of null 错误时，一定要检查你的代码是否在正确的元素上调用 addEventListener，并且该元素已经被正确加载。