本文详解为何在 for 循环中为多个单选按钮绑定 onclick 会导致所有点击都触发同一值（如始终弹出 `undefined` 或最后一个值），并提供使用 `addeventlistener` 和事件委托的现代、可靠解决方案。
你遇到的问题本质上是 闭包与变量作用域的经典误区，而非事件机制本身“异常”。在原始代码中：
const radio = document.getElementsByName('subject');
for (let i = 0; i < radio.length; i++) {
radio[i].onclick = () => {
alert(`You chose ${radio[i].value}.`);
};
}表面上看，每次循环都为不同 <input> 元素绑定了独立的点击处理函数；但关键在于：箭头函数内部引用的是 块级作用域变量 i。由于 var 已被 let 替代，此处 i 具有块级绑定（block-scoped），本应避免经典 var 提升问题——但请注意：let 在 for 循环中为每次迭代创建新绑定，因此这段代码 实际能正常工作（现代浏览器中会正确输出对应 value）。
⚠️ 然而，真正危险且更常见的错误写法是使用 var：
// ❌ 危险示例（极易出错）
for (var i = 0; i < radio.length; i++) {
radio[i].onclick = function() {
alert(`You chose ${radio[i].value}.`); // i 总是 radio.length，越界 → undefined
};
}此时所有回调共享同一个 i 变量，循环结束后 i === radio.length，点击任一按钮都会读取 radio[radio.length].value → undefined。
立即学习“Java免费学习笔记（深入）”；
✅ 推荐解法一：使用 addEventListener + let（明确、安全）
const radios = document.querySelectorAll('input[name="subject"]');
radios.forEach((radio, index) => {
radio.addEventListener('click', () => {
alert(`You chose ${radio.value}.`);
});
});✅ 推荐解法二：事件委托（高效、动态友好）
将监听器绑定到共同父容器（如 <fieldset>），利用事件冒泡和 event.target 判断来源：
const fieldset = document.querySelector('fieldset');
fieldset.addEventListener('click', (e) => {
if (e.target.type === 'radio' && e.target.name === 'subject') {
alert(`You chose ${e.target.value}.`);
}
});✅ 进阶：使用 change 事件替代 click（语义更准确）
单选按钮的值变更应在 change 事件中响应（用户确认选择后触发，避免误点）：
radios.forEach(radio => {
radio.addEventListener('change', (e) => {
console.log('Selection confirmed:', e.target.value);
});
});? 注意事项总结：
- 避免直接赋值 element.onclick = handler：仅支持单个监听器，覆盖风险高；
- 优先使用 addEventListener()，支持多监听器、可移除（removeEventListener）、语义清晰；
- 对于动态添加的表单控件，事件委托是唯一健壮方案；
- change 比 click 更符合表单交互语义（尤其对键盘操作、辅助技术更友好）；
- 始终用 querySelectorAll 替代 getElementsByName（返回静态 NodeList，更易操作）。
掌握这些模式，你不仅能修复当前问题，更能写出可维护、可扩展、符合现代 Web 标准的事件处理逻辑。
