JavaScript 中循环绑定事件监听器的常见陷阱与正确实践

本文详解为何在 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}.`);
    };
}

表面上看，每次循环都为不同 元素绑定了独立的点击处理函数；但关键在于：箭头函数内部引用的是 块级作用域变量 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。

✅ 推荐解法一：使用 addEventListener + let（明确、安全）

const radios = document.querySelectorAll('input[name="subject"]');

radios.forEach((radio, index) => {
    radio.addEventListener('click', () => {
        alert(`You chose ${radio.value}.`);
    });
});

✅ 推荐解法二：事件委托（高效、动态友好）

将监听器绑定到共同父容器（如

const fieldset = document.querySelector('fieldset');
fieldset.addEventListener('click', (e) => {
    if (e.target.type === 'radio' && e.target.name === 'subject') {
        alert(`You chose ${e.target.value}.`);
    }
});

radios.forEach(radio => {
    radio.addEventListener('change', (e) => {
        console.log('Selection confirmed:', e.target.value);
    });
});