js高级_110、循环遍历监听
js循环绑定事件
在编写JS代码的时候，我们经常会遇到要对一系列元素进行事件绑定的情况，然后就会理所当然的开一个for循环，对元素的事件进行赋值等操作，最后运行的效果却不是希望有的样子，事件的响应只能和最后一个元素一样。
html元：希望给每个按钮都绑定单击事件，输出他们是第几个按钮
<body>
<button>测试1</button>
<button>测试2</button>
<button>测试3</button>
</body>
.length不是一直在里面，而是每一次循环都要计算统计这个伪数组的length是多少，效率比较慢，
var btns=document.getElementsByTagName("button");//返回的是一个元素对象的伪数组
//这样只需要计算一次。
//遍历加监听
for (var i=0,btnsLength=btns.length ;i<btnsLength;i++) {
var btn=btns[i];
btn.onclick=function(){
alert("第"+(i+1)+"个");
}
}
如果是上面这样写的话，不管点击那个按钮，都是输出“第4个”，因为js的函数是触发时调用的，绑定事件的时候i并没有被传入执行函数里。这里的onclick函数中的变量i指向的内存地址，在循环结束后变成了3，所以所有的btn在点击后都输出3。上面这个方法执行后，会发现遍历数组后，监听到的事件，索引值始终等于遍历结束之后的值。错误原因：JS引擎的解析机制是，执行的时候将for循环中代码执行，这个时候i变成最后的值，当发生onclick事件时，会找到运算之后的i,因此绑定的事件是最后的。因为for循环已经执行完了。全局变量i的值已经是3了，而执行for循环中代码时，并不会调用onclick函数，等你单击才调用，才传i给函数。
解决方法1，给每个button元素添加index属性，这样每次点击触发时用自己的属性输出。
//利用index属性
for (var i=0,btnsLength=btns.length ;i<btnsLength;i++) {
var btn=btns[i];
btn.index=i;
btn.onclick=function(){
alert("第"+(this.index+1)+"个");
}
}
解决方法2，利用闭包
//利用闭包
for (var i=0,btnsLength=btns.length ;i<btnsLength;i++) {
(function(i){//这里的i是函数内部自己的。
var btn=btns[i];
btn.onclick=function(){
alert("第"+(i+1)+"个");
}
})( i);//这里的i是全局的
}
