循环内绑定事件不符合预期：为何点击单选框反复触发alert？

核心逻辑：循环是「绑定事件」，而非「执行事件」 #

页面加载时循环只跑一次，它的任务不是直接弹出弹窗，而是给每个单选按钮单独挂上点击事件的处理函数。

• 循环每轮迭代，会拿到一个radio[i]（单个单选框DOM元素），然后把箭头函数赋值给这个元素的onclick属性。
• 这个箭头函数不会在循环执行时立刻运行，它只是被「挂载」到了对应单选框的点击事件上。只有当用户点击这个单选框的时候，浏览器才会调用这个函数，触发alert弹窗。

为什么不能把事件逻辑放循环外？ #

如果把点击逻辑挪到循环外，你根本没法给每个单选框单独绑定事件——循环外的代码无法遍历到每个单选框元素，也就没法把处理函数和每个按钮关联起来。

举个简单的反例，就算你把处理函数单独拎出来，依然得在循环里完成绑定：

const radio = document.getElementsByName('subject');

// 单独定义处理函数
function handleClick() {
    alert(`You chose ${this.value}.`); // 用this指向当前触发事件的元素更稳妥
}

// 还是得在循环里给每个单选框绑定
for (let i = 0; i < radio.length; i++) {
    radio[i].onclick = handleClick;
}

要是跳过循环里的绑定步骤，所有单选框都不会关联点击事件，点击后自然没反应。

额外注意：let的作用域帮你避了坑 #

你代码里用了let i，每轮循环的i都是独立的块级作用域，所以箭头函数里的radio[i]能正确指向当前循环的那个单选框。如果换成var i，就会出现所有点击都指向最后一个单选框的问题——因为var是函数级作用域，循环结束后i会停在最后一个值。

你的代码逻辑是完全正确的 #

运行流程拆解：

1. 页面加载完成，JS执行，循环遍历3个单选框
2. 给每个单选框的onclick绑定专属的箭头函数，函数内部保存了对应单选框的引用
3. 用户点击任意单选框，浏览器触发该元素的onclick事件，执行对应的箭头函数，弹出正确的选项值

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