在循环中处理点击事件：了解闭包陷阱
将点击处理程序分配给具有循环的多个元素时，必须注意JavaScript 的闭包机制。一个常见的错误是在循环中创建闭包而不使用回调函数。这可能会导致意外的行为。
在提供的代码片段中：
$(document).ready(function(){
for(var i = 0; i < 20; i++) {
$('#question' + i).click( function(){
alert('you clicked ' + i);
});
}
});预期的行为是单击 #mydiv3 将显示“您单击了 3”。但是，代码错误地使用了 i 变量，它是循环中的全局变量。因此，i 变量的最终值为 20，从而导致错误的警报消息。
在循环中分配点击处理程序的正确方法是使用回调函数。这些函数可以为 i 变量创建一个新的作用域，确保循环的每次迭代都有自己的 i 实例。
function createCallback(i){
return function(){
alert('you clicked ' + i);
}
}
$(document).ready(function(){
for(var i = 0; i < 20; i++) {
$('#question' + i).click(createCallback(i));
}
});如果使用 ES6，另一个现代解决方案是利用 let 关键字为循环的每次迭代创建一个局部变量：
for(let i = 0; i < 20; i++) {
$('#question' + i).click( function(){
alert('you clicked ' + i);
});
}这种方法更干净、更容易理解。它确保每个点击处理程序都有自己的 i 变量，消除闭包陷阱并确保在循环中处理点击事件时的正确行为。
以上是为什么 JavaScript 中基于循环的点击处理程序有时会显示意外的值？的详细内容。更多信息请关注PHP中文网其他相关文章！
