循环内的Javascript绑定单击处理程序[重复]答案

【问题标题】：Javascript binding click handller inside a loop [duplicate]循环内的Javascript绑定单击处理程序[重复]
【发布时间】：2013-07-05 05:21:14
【问题描述】：

我正在尝试创建多个链接并在循环内将 onclick 处理程序绑定到它们。单击链接时，我想显示一个指示链接编号的警告框（1 表示第一个链接，2 表示第二个链接，3 表示第二个链接，依此类推）。

<html>
<body>
</body>
</html>

<script type = 'text/javascript'>
for (var i = 0; i < 10; i++) {
    var link = document.createElement("a");
    link.innerHTML = "Link " + i;
    link.href = '#';
    link.onclick = function () {
        alert("This is the link " + i);
        return false;
    };
    document.body.appendChild(link);
}
</script>

由于某种原因，当我可以单击任何链接时，我都会收到相同的警报消息“这是链接 10”。

可能是因为警报函数的参数仅在调用该函数时才被绑定？因为最终循环结束后 i 的值是 10。

【问题讨论】：

标签： javascript events

【解决方案1】：

简单回答，使用closure:

link.onclick = (function(j) {
    return function(){
        alert ("This is the link " + j);
        return false;
    }
})(i);

【讨论】：

或者更好 - 将匿名函数完全移出循环
本来想说同样的话，但在这样的例子中，我仍然很难理解为什么需要关闭。 ..仍然正确的反应:)
@Robert，所有函数都引用相同的“全局”i 变量，如果它更改它们引用新值。您需要引用私有范围变量。因此关闭。
当您将自调用函数分配给变量时实际发生了什么？它是否执行然后返回的函数被分配给 link.onclick ？
OP 代码中的事件处理程序已经是一个闭包。这里的关键是执行一个函数来创建一个新的范围。该函数不必是闭包（即使所有函数在 JS 中都是闭包）。