addEventListener绑定函数时页面加载就自动触发是什么原因？

问题原因 #

你给addEventListener方法传递第二个参数时写了startGame()，带括号会让JavaScript在解析到这段代码时立即执行startGame函数，再把该函数的返回值作为事件处理程序绑定到mousedown事件上，所以会出现页面加载时函数就自动触发的问题。

修复方案 #

有两种常用修复方式：

• 直接传递函数引用：去掉startGame后面的括号，把函数本身绑定为事件处理程序，只有触发mousedown事件时才会执行，修复后的完整代码如下：

window.onload = function() {
    id("start-btn").addEventListener("mousedown", startGame);
}

• 如果需要给startGame传递自定义参数，可以用匿名函数/箭头函数包裹一层：

window.onload = function() {
    // 示例：给startGame传入难度参数
    id("start-btn").addEventListener("mousedown", () => startGame('hard'));
}

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