为何页面加载时打印9次Hello World，而非点击事件触发？

• 核心问题：你在给元素绑定点击事件时写了myfunction()——这会让浏览器执行forEach循环时立刻调用这个函数，而不是把它作为点击触发的回调。正确写法是传递函数本身（去掉括号）。

• 修正后的代码（同时优化了重复的元素获取逻辑，减少冗余）：

// 批量获取数字元素，无需逐个声明变量
const numbers_ = Array.from({length: 10}, (_, i) => document.getElementById(`number${i}`))
  // 过滤页面中不存在的元素，避免后续报错
  .filter(el => el !== null);

function myfunction() {
    console.log("hello world");
};

// 绑定事件时传递函数引用，不带括号
numbers_.forEach(num => {
    num.addEventListener("click", myfunction);
});

• 额外说明：
  • 你原来的numbers_数组漏了number2，优化后的代码会自动遍历0-9的所有数字元素，若页面中不存在某元素，filter会自动过滤掉它。
  • 如果需要给回调函数传递参数，可以用匿名函数包裹，示例：

    numbers_.forEach(num => {
        num.addEventListener("click", () => myfunction(num.textContent));
    });
    

    这种写法不会立即执行myfunction，只会在点击元素时触发。

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