在JavaScript中批量为元素绑定事件时，循环变量往往因作用域问题导致所有事件监听器指向同一个最终值。本文通过示例代码分析该现象，并介绍使用闭包和with关键字两种方案来正确保存循环变量，确保每个元素点击时能获取对应的索引值。
JS批量绑定事件循环变量作用域问题与闭包解决方案
在JavaScript中执行for循环时，循环变量i通常保存在其所在的函数或类的作用域内。这导致在批量为元素绑定事件时，所有事件处理程序中的i值都会变为循环结束后的最后一个变量值。解决此问题的思路是将循环变量保存起来，限制其作用域仅在循环体内，而非整个函数。常见的解决方案有两种：一是使用闭包（若不了解闭包，建议查阅相关资料）；二是使用with关键字，其语法为with( obj ) { //使得可以在此直接访问obj的属性，而不用加obj.XXX }。
具体代码实现如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript" src="jquery-1.7.2.js" ></script>
<script type="text/javascript" language="javascript">
$(document).ready(function (){
function Ev(i){
this.index = i;
this.click = function (){
alert(this.index );
}
}
for(var k=1; k<4; k++){
//闭包函数1
// (function(x){
// $("#div" + x).click(function(){
// f(x);
// });
// }(k));
//使用with关键字
with ({i: k}){
$("#div" + i).click(function(){
f(i);
});
}
}
var f = function (m){
alert(m);
}
});
</script>
</head>
<body>
<div id="div1">1
</div>
<div id="div2">2
</div>
<div id="div3">3
</div>
</body>
</html>