技术咨询：为何脚本未等待onclick事件，页面加载时就修改标题文本？

嘿，这个问题我碰到过好多次啦！你遇到的页面加载时标题就变化的情况，核心问题出在事件绑定的方式错了：

• 先看你大概率写错的代码：

  // 注意这里的changeTitle()带了圆括号！
  document.getElementById('myBtn').onclick = changeTitle();
  
  function changeTitle() {
    document.title = "点击后的新标题";
  }
  

  当你给onclick赋值时写了changeTitle()，这相当于立刻调用了这个函数，然后把函数执行后的返回值（这里是undefined）绑定给了onclick。所以页面一加载，函数就跑起来了，标题直接变了，反而点击按钮的时候啥反应都没有——因为onclick现在存的是undefined，不是要执行的函数。

• 正确的打开方式是传递函数引用（别加圆括号）：

  // 只写函数名，把函数本身交给onclick事件
  document.getElementById('myBtn').onclick = changeTitle;
  
  function changeTitle() {
    document.title = "点击后的新标题";
  }
  

  如果需要给函数传参数，就用匿名函数包裹一下：

  document.getElementById('myBtn').onclick = function() {
    changeTitle("我是自定义标题");
  };
  
  function changeTitle(newTitle) {
    document.title = newTitle;
  }
  

总结一下：你把“函数执行的结果”绑定给了点击事件，而不是“函数本身”，导致函数在页面加载阶段就被触发，完全没等到点击按钮的时机。

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