为什么onclick绑定的函数未被点击就会自动执行？

问题核心原因 #

你在给onclick事件绑定回调时写的是doStuff()，带括号的写法会立即执行doStuff函数，并把函数的返回值（你的doStuff没有定义返回值，所以返回值为undefined）赋值给onclick，因此页面加载执行pageReady逻辑时就会直接触发doStuff，不会等到点击事件发生时才执行。

两种写法的区别：

• doStuff()：立即调用函数，得到的是函数运行后的返回结果
• doStuff：是对函数本身的引用，传递的是完整函数体，只有在对应事件触发时才会被执行

修复方案 #

去掉doStuff后面的括号，把函数本身直接赋值给onclick即可：

function pageReady() {
  var buttonBox = document.getElementById("buttonBox");
  buttonBox.onclick = doStuff;

  function doStuff() {
    buttonBox.style.background = "orange";
    buttonBox.style.width = "600px";
    buttonBox.innerHTML = "<h2>SURPRISE!!</h2>";
  }
}

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