JavaScript循环绑定事件
我们有时候需要对变量绑定某个功能相同的函数或者方法,如果是一个两个,直接写就复制粘贴就可以了,可是当绑定的变量很多的时候,显然循环会让它变得更简单.
比如在设计网页的时候,我们对一组li都要绑定点击事件,而点击事件的作用都是相同的.那么循环绑定就比较好.
<body>
<ul>
<li>点击1</li>
<li>点击2</li>
<li>点击3</li>
</ul>
//这组li的html代码假设是这样的
</script> //这里是对这个li循环绑定这个点击事件.
var li = document.getElementsByTagName("li");
for (var i = 0;i < li.length;i++) {
li[i].onclick = function(){
alert(i);
}
}
</script>
</body>
看着好像没什么问题,当点击 li[0](点击1)的时候似乎应该弹出来0,可是结果却出人意料,每个li点击alert的都是3.这是为什么呢?
我们在绑定li的点击事件时是这样的 li[i].oncick = function(){}这里有问题,因为赋值的是一个匿名函数,而匿名函数不会自执行.循环语句就相当于下面这样:
li[0].onclick = function(){alert(i);};
li[1].onclick = function(){alert(i);};
li[2].onclick = function(){alert(i);};
我们可以看到,数组的索引确实在改变,可是函数体内并没有改变,而还是alert(i);
由于一直没有执行匿名函数,所以for循环会做完,i的值变成3结束.
这个时候当我们点击的时候,i已经循环完变成了3 所以每次点击的时候都是3,需要注意的是,在给li数组赋值的时候并没有触发onclick事件.
那么解决方法如下
var li = document.getElementsByTagName("li");
for (var i = 0;i < li.length;i++) {
li[i].onclick = function(num){
return function(){
alert(num);
}
}(i);
}
匿名函数后加()代表立即执行,也就是说让li[i].onclick = funtion(){}这句话立即执行,执行的结果是什么呢,就是返回了一个函数,而这个函数又把i作为参数传进去,所以循环语句就像下面这样:
li[0].onclick = function(){alert(0);};
li[1].onclick = function(){alert(1);};
li[2].onclick = function(){alert(2);};
这样就利用闭包将事件循环绑定了
注:作者是新手,如果有大牛看到了哪里有不对,希望多多指正,有助于我提高,谢谢
