使用for循环给按钮数组绑定addEventListener时点击均提示clicked 8怎么办

你代码中的问题核心是作用域与闭包的变量捕获问题：

• 循环里的i没有声明作用域，默认挂载到全局作用域，整个循环全程只有这一个i变量
• 点击事件的回调函数是异步执行的，只有用户点击按钮时才会触发，此时for循环已经执行完毕，i的最终值为7（循环判断条件i<=6，i自增到7时才会终止循环）
• 所有回调函数内引用的都是同一个全局i，执行时自然读取到的都是最终值7，i+1结果就是8。

下面是几种常用的修复方式： #

方案1：使用let声明循环变量（最简便） #

let支持块级作用域，每次循环都会生成独立的i变量，每个回调会捕获对应轮次的i值，仅修改循环声明即可：

// 只需要把i的声明改为let
for(let i=0; i<=6; i++) {
  document.querySelectorAll("button")[i].addEventListener("click", function(){
    alert("clicked " + (i+1))
  });
}

方案2：使用立即执行函数（IIFE）创建闭包 #

兼容旧版本ES5环境的写法，通过立即执行函数把每轮的i值封存到独立作用域中：

for(var i=0; i<=6; i++) {
  // 每轮循环把当前i作为参数传入立即执行函数
  (function(index) {
    document.querySelectorAll("button")[index].addEventListener("click", function(){
      alert("clicked " + (index+1))
    });
  })(i)
}

方案3：用forEach遍历节点列表 #

更符合现代JS写法，避免手动管理循环变量，forEach的回调本身就会为每个元素生成独立作用域：

const buttons = document.querySelectorAll("button");
buttons.forEach((btn, index) => {
  btn.addEventListener("click", () => {
    alert("clicked " + (index + 1))
  })
})

方案4：事件委托（性能最优） #

不需要给每个按钮单独绑定事件，只需要给父容器绑定一次事件，通过事件冒泡判断点击目标，适合节点数量多的场景：

document.querySelector('.set').addEventListener('click', (e) => {
  // 仅当点击目标是按钮时触发逻辑
  if(e.target.tagName === 'BUTTON') {
    const buttons = Array.from(document.querySelectorAll('button'));
    const currentIndex = buttons.indexOf(e.target);
    alert("clicked " + (currentIndex + 1))
  }
})

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