JavaScript报addEventListener is not a function错误的问题咨询

这个报错和DOM加载时机无关，是两个代码书写错误导致的：

• 核心原因是方法名拼写错误：DOM节点绑定事件的原生方法名为addEventListener，你的代码里把Listener错拼成了Listner（漏了t和n之间的字母e），浏览器在按钮元素上找不到这个自定义命名的方法，自然会抛出「xxx is not a function」的类型错误。
• 还有一个隐藏的逻辑错误：你写的事件绑定参数里hover()带了执行括号，这会让JS在执行绑定语句时立刻调用hover函数，把函数的返回值（你的hover函数没有写return，实际返回undefined）作为事件回调传入，就算修正了拼写，也会出现「页面一加载就打印日志，鼠标悬浮按钮反而没反应」的问题。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="icard">Hover Me</button>
</body>
<script>
  function hover() {
    console.log("Hovered!!!");
  }
  let b = document.getElementById("icard");
  // 修正方法名拼写，同时去掉hover后的括号，传入函数引用而非执行结果
  b.addEventListener("mouseover", hover);
</script>
</html>

避坑提示：写原生API时尽量用编辑器的自动补全功能生成方法名，不要手动硬拼，能避免绝大多数拼写类低级错误。

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