1.如何点击每一列的时候alert 其index?
<ul id="test">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
window.onload = function (){
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = function(){
alert(i); //每次都是4
};
};
}
解释:因为在for循环里面指定给lis[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。
2.解决办法
方法一:
window.onload = function (){
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
(function(i){
lis[i].onclick = function(){
alert(i); //0123
};
})(i)
};
}
解释:成功打印每个i的值,原理就是通过自执行函数,并且将变量i保存到这个自执行函数的参数中。
方法二:
window.onload = function (){
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].index=i;
lis[i].onclick=function(){
alert(this.index); //0123
};
};
}
解释:
方法三:
window.onload = function (){
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = (function(e){
return function(){
alert(e);//0123
};
})(i);
};
}
解释:
3.其他尝试
3.1
for(var i=0;i<10;i++){
function a(){
console.log(i);
}
a(); //1,2,3,4,5....
}
解释:为什么这样就可以呢?因为你在循环变量i的时候已经执行了函数a,自然变量i是什么就打印出来什么。
3.2
window.onload = function (){
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick = a();
function a(){
alert(i); //1,2,3,4.....
}
};
}
解释:虽然这样可以打印出每次的变量i的值,但是我们没有点击box的时候它已经执行完了,直接无视了点击事件,也就是说这个点击事件已经可有可无了,所以我们用这种方法在绑定事件中就显得不那么可用了。