javascript - 在循环中分配 EventListener

Question

我使用这行代码向通过 forloop 创建的 div 添加事件监听器:

for(var i in mail){
   //create div
   parent.addEventListener("click",function(){read_msg(mail[i].id);},false);
   //append to parent
}

这导致 mail[i].id 成为所有邮件的最后一个 id 的问题。我已经阅读了一些如何解决它的例子，但我发现它仍然很困惑。

有人建议我解决:

(function(){read_msg(mail[this].id)}).bind(i);

但我被告知这不是一个很好的解决方案，希望有人能解释你如何让 read_msg 保持 id 的正确值？就解决方案而言，它总是显得有些困惑。

Answer 1

这是因为您在事件处理函数中使用了闭包变量 i。

变量i 驻留在外部函数的范围内，即变量i 只有一个实例。当调用处理程序方法并访问 i 时，javascript 将首先查看处理程序函数的范围，如果在那里没有找到变量，它将查看父闭包范围，然后它会找到父作用域中的变量。

在父作用域中，随着循环的执行，该值不断更改 i 的值，这就是为什么所有回调对 i 具有相同值的原因。

这里的解决方案是创建一个本地闭包

for(var i in mail){
    (function(myvar){
        parent.addEventListener("click",function(){read_msg(mail[myvar].id);},false);
        //append to parent
    })(i);
}

这里我们所做的是我们有一个立即调用的函数表达式，我们将 i 的值作为参数 myvar 传递给它。所以循环中的每次迭代都会创建一个独立的闭包。