关于 for 循环和 onclick() 事件中循环变量的问题

在一个学习案例中，使用以下代码为三个.box元素添加点击事件：

var boxs = document.getelementsbyclassname('box');

for (var i = 0; i < boxs.length; i++) {
    boxs[i].onclick = function () {  // i = 1,2,3
        console.log(i); // i = 3
    }
}

然而，发现 onclick 事件中 i 的值始终是循环最终的值 3。为什么会发生这种情况？

问题的根源

问题产生的原因与 javascript 中 var 变量在函数作用域和全局作用域中所遵循的不同规则有关。

jQuery点击事件遮罩弹出层可移动特效代码

"jQuery点击事件遮罩弹出层可移动特效代码下载。一款jquery弹出层插件制作注册表单点击按钮弹出层表单提交效果，可支持拖到的jQuery弹出层效果。标题、高度、宽度等可以自定义弹出层js插件。

下载

当用 var 声明变量时，它在整个函数中都有效。这意味着，在 for 循环内用 var 声明的变量 i 实际上被提升到了函数作用域（在本例中即全局作用域）。

因此，对于循环中的每一次迭代，都会将 i 的值提升到全局作用域。当点击事件被触发时，它访问的 i 是全局变量，此时的值已经更新为 3，也就是循环的最后一次迭代。

解决方案

为了解决这个问题，可以改用 let 或 const 来声明循环变量 i，以便将变量的作用域限制在循环内。例如：

var boxs = document.getElementsByClassName('box');

for (let i = 0; i < boxs.length; i++) {
    boxs[i].onclick = function () {  // i = 0,1,2
        console.log(i); // i = 0,1,2
    }
}

使用 let 或 const，循环内的每个迭代都会创建一个新的 i 变量，其值在事件被触发时保持不变。