用for循环注册事件，事件里边的变量问题

Question

比如有这样的代码for(var i = 0; i < list.length; i++){ list[i].onclick = function(){                alert(i); } }用for循环注册事件，不管点击哪个list选项，alert都是list.length，怎么样做才能alert的当前的i值？

Answer 1

因为点击事件是在 for 循环走完之后才执行的,所以会出现上述情况.

此时就需要记录i 值

for(var i = 0; i < list.length; i++){
list[i].index = i;
list[i].onclick = function(){
                alert(this.index);
}
}

现在就是点击哪个,打印哪个.

望采纳!

Answer 2

原因是JavaScript没有局部作用域，所以for循环结束后，i的值就是list.length，而当触发click事件时候，理所当然弹出list.length。这时候要么用1楼的存变量方法，也可以使用闭包(http://www.imooc.com/wenda/detail/318961 ← 戳这里，问题一样 )，如下：

// 使用len存储list.length，优化性能，提防每次循环都获取list.length
for (var i = 0, len = list.length; i < len; i++) {
    list[i].onclick = (function (index) {
        return function() {
            alert(index);
        };
    }(i));
}

Answer 3

点击事件是异步触发的，触发事件时，for循环早已经执行完了，所以点击事件向上查找i值时，得到的i值都是相同的。

加层闭包就好了。

(function(i){

    for(){........};

})(i)

Answer 4

js闭包    for(var i=0; i<10; i++){(function(i){console.log(i);})(i)}   (function(参数A){})(参数A)

Answer 5

for(var i = 0; i < list.length; i++){

    this.onclick = function(){

                alert(i);

    }

}