如何在设置事件处理程序时使用变量的值，而不是在执行时的值

Question

我有10个div，id为＃key0，key1，key2等。在我的初始化函数中，我试图运行一个循环来为所有这些添加事件处理程序，如下所示：

for (x=0; x<=9; x++){
    document.getElementById("key" + x).addEventListener("click", function(){ numClick(x) }, false);
}

目标是使用一个事件设置每个div，该事件会在单击时将相应的数字发送到numClick函数。我错误地期望它在分配事件处理程序时设置变量的值，但当然它没有。因此，每次单击其中一个div时，它总是发送一个值10，因为这是x在循环之后结束的内容。

我一直试图找到一种方法来完成这项工作，但到目前为止我还没有想出任何东西。

Answer 1

在循环中使用一个立即执行的函数表达式，它将为每个迭代创建一个范围，您可以在其中拥有一个变量实例：

for (x=0; x<=9; x++){
  (function(y){
    document.getElementById("key" + y).addEventListener("click", function(){ numClick(y) }, false);
  })(x);
}