JavaScript事件监听问题：myFunction页面加载时自动执行的原因及解决

嘿，我来帮你拆解下你遇到的这两个问题：

为什么函数会在页面加载时自动执行？ #

大概率是你在写addEventListener的时候不小心给函数名加了括号！比如如果写成：

document.getElementById("myBtn").addEventListener("click", myFunction());

括号()会直接触发函数执行，而不是把函数本身作为“点击时要运行的回调”传递给监听器。这就导致页面一加载到这段代码，myFunction就跑了一次，而且因为函数没有返回值（默认返回undefined），你的点击监听器其实根本没绑定上有效的处理逻辑。

为什么点击按钮会触发多次执行？ #

你的按钮上同时用了两种事件绑定方式：

1. HTML里的onclick="myFunction()"属性
2. JS里的addEventListener("click", myFunction)

这相当于给按钮的点击事件绑定了两次同一个函数，所以每次点击都会触发两次myFunction。

另外你提到把脚本放<head>里会报错，这是因为浏览器是从上到下解析HTML的，<head>里的JS执行时，<body>里的按钮还没被创建出来，document.getElementById("myBtn")会返回null，自然就会报错啦。

解决办法 #

1. 移除重复绑定（推荐） #

选一种事件绑定方式就好，更推荐用addEventListener（它支持给同一个事件绑定多个不同的函数，也更便于后期维护）：

• 先修改HTML，删掉按钮的onclick属性：

<button id="myBtn">Click</button>

• 确保JS里的addEventListener传递的是函数引用（不带括号）：

var x = 0;
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
  x++;
  document.getElementById('para').innerHTML = x ;
}

2. 让脚本可以放在<head>里 #

如果一定要把JS放在<head>里，可以监听DOMContentLoaded事件，等整个DOM结构加载完成后再执行代码：

<head>
  <script>
    // 等DOM加载完成后再执行
    document.addEventListener('DOMContentLoaded', function() {
      var x = 0;
      document.getElementById("myBtn").addEventListener("click", myFunction);
      function myFunction() {
        x++;
        document.getElementById('para').innerHTML = x ;
      }
    });
  </script>
</head>
<body>
  <h1>Headline</h1>
  <button id="myBtn">Click</button>
  <p id="para">Some text</p>
</body>

这样就不会出现找不到按钮元素的问题了。

关键提醒 #

永远记住：给addEventListener传回调函数时，要传函数名（不带括号），加括号就会立即执行函数，而不是等待事件触发！

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