javaScript中onclick函数循环事件时闭包的影响

来源:互联网 发布:php增删改查源码下载 编辑:程序博客网 时间:2024/06/01 10:11
    for (var i=0;i<aa.length;i++) {        aa[i].onclick = (function (i) {            return function () {                alert(aa[i].innerHTML);            }        })(i);    }}

首先:

1、JS函数传参是传值不传址的。
2、onclick的值应该给一个函数声明,事件触发时只会传一个event参数给声明的函数。

如果在循环中使用aa[i].onclick = function() { alert(aa[i].innerHTML); };
i 不是这个匿名函数的参数,是传址进去的,当onclick事件触发的时候循环已经结束了,i 已经是最后一个值了。因此,当网页解析完成后,直接就会出现警示框,并不需要触发点击事件。
如果声明 function(i) { alert(i); }
那这个 i 就指代了 event,这时候事件触发的时候只会弹出触发的事件名。

而使用aa[i].onclick = (function(i) { return function() { alert(aa[i].innerHTML); } })(i);
这里是执行外层的匿名函数返回内层的这个匿名函数传给onclick。
这里注意外层函数是立即执行的,带一个参数,是我们传给它的,而不是事件触发器
内层函数是不带参数的,事件执行时触发器会传给它一个event值。
对循环中的每一个 i 都会生成一个匿名函数,i 作为生成的匿名函数的参数,是传值的。
相当于循环中当 i = 2 的时候,生成了这样一个函数:function() { alert(aa[2].innerHTML); }; 赋值给了aa[2].onclick,即aa[2].onclick = function() { alert(aa[2].innerHTML); };
这才是我们想要的。

PS:闭包只是个手法,而不是解决问题的核心所在。
这种手法跟下面的方法是等价的,而下面并没有用闭包。
var al = function(param) {
return function() {
alert(param);
}
}
循环中aa[i].onlick = al(i);
0 0