不知道是早期上课时,老师故弄玄虚的将循环的问题暴露一遍,然后用解释不通的解释讲一遍。在使用循环绑定前一直心有疑虑,战战兢兢。其实,何必呢,两句话直接完成,且带有对比。
之前的问题
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var list_obj = document.getElementsByTagName('li');
for (var i = 0; i <= list_obj.length; i++) {
list_obj[i].onclick = function() { // i=5
alert(i);
}
}
</script>
</body>
理解上onclick
没有触发,只是一个函数表达式,所以i直接跳过继续执行,得到只能是i=5
基本解决办法,就是也让onclick事件执行,既然没法直接变被动为主动,那就虚伪的给他一个执行,让他占个坑,于是闭包应用而生。执行,执行,再执行。
<body>
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var list_obj = document.getElementsByTagName('li');
for (var i = 0; i <= list_obj.length; i++) {
(function(){
var p = i
list_obj[i].onclick = function() {
alert(p);
}
})();
}
</script>
</body>
类似的办法也引用过来。
for(var i=0;i<10;i++){
btns[i].onclick=(function(i){
return function(){alert(i)}
})(i)
}
以上方法未做测试,只是在想一个问题,既然我们常用addEventListener
,那么这个问题就不是问题,不需要闭包,直接给
btns[i].addEventListener('click'. function(){
// do something
} )
执行即可。