为已有元素绑定addEventListener点击事件报null错误如何解决

这个报错和其他事件监听器是否触发完全无关。
浏览器解析HTML文档是从上到下顺序执行的，如果你把获取#myDiv、绑定点击事件的代码放在head区域的script标签里，代码执行时body内的<div id="myDiv">还没被解析到DOM树中，document.getElementById("myDiv")会返回null，在null值上调用addEventListener方法，就会抛出Cannot read properties of null (reading 'addEventListener')的错误。

你提供的完整HTML示例里，body内的script能正常绑定myHandler事件，本质就是因为这段script写在#myDiv元素的后面，执行时元素已经存在。

你可以任选以下一种方式修复问题：

• 调整脚本位置：把绑定事件的代码移动到#myDiv元素的后方（推荐放在body标签末尾），保证代码执行时目标元素已经完成解析。
  参考写法：

  <body>
    <div id="myDiv">OMG Click me!</div>
    <!-- 其他页面元素 -->
    <script>
      document.getElementById("myDiv").addEventListener("click", blah);
      function blah() {
        console.log("test");
      }
    </script>
  </body>
  

• 监听DOM加载完成事件：把绑定逻辑包裹在DOMContentLoaded事件的回调中，等整个DOM树解析完毕后再执行绑定操作，无需调整现有script标签的位置。
  参考写法：

  // 这段代码放在head的script里也可以正常运行
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("myDiv").addEventListener("click", blah);
    function blah() {
      console.log("test");
    }
  });
  

• 给脚本标签添加defer属性：带有该属性的脚本会在DOM解析完成后、DOMContentLoaded事件触发前执行，也能保证获取元素时DOM节点已经存在。

内容的提问来源于stack exchange，提问作者Marc