Javascript中的闭包[重复]

Question

可能重复：
Passing values to onclick

我有 100 个 ID 为 divNum0,...,divNum99 的元素。每次单击时都应使用正确的参数调用doTask。

不幸的是，下面的代码没有关闭 i，因此 doTask 被调用，所有元素都是 100。

function doTask(x) {alert(x);}

for (var i=0; i<100; ++i) {
    document.getElementById('divNum'+i).addEventListener('click',function() {doTask(i);},false);
}

有没有办法让函数调用正确的参数？

Answer 1

虽然（正确）答案是the duplicate，但我想指出一种更高级的方法——用迭代器替换循环，它有效地解决了javascript“后期绑定”闭包问题。

loop = function(start, end, step, body) {
    for(var i = start; i != end; i += step)
       body(i)
}

loop(1, 100, 1, function(i) {
   // your binding stuff
})

Answer 2

通过自执行函数字面量（或命名工厂函数）创建闭包

function doTask(x) { alert(x); }

for(var i = 100; i--;) {
    document.getElementById('divNum' + i).onclick = (function(i) {
        return function() { doTask(i); };
    })(i);
}

或者使用DOM节点进行信息存储

function doTask() { alert(this.x); }

for(var i = 100; i--;) {
    var node = document.getElementById('divNum' + i);
    node.x = i;
    node.onclick = doTask;
}

后者对内存更友好，因为不会创建多余的函数对象。