在js中,用循环来为一对元素队列的元素绑定事件,是一个常见的问题。
通常进入误区的新人,都会这么写代码: (假设元素队列为o,默认使用jQuery)
//error method
var o =$(‘.blockHead‘); for(var i=0; i<o.length; i++){ o[i].onclick = function(){ function(i){ alert(i); } } }
当然这种情况下,你会发现每个元素点击运行时,显示的 i值 都是 o.length-1;
因为js的函数是调用时触发,绑定事件的时候i值并没有被传入执行函数里。
作为异步监听的事件,点击事件发生的时候,循环已经结束,此时的 i值 为[o.length-1], 触发事件传递的参数自然是同一个最大值,而不是预期不同元素传不同值。
解决办法思路:将绑定事件过程中得到的i值,在执行函数域里保存起来;调用时自然就得到相应的结果。
方法一: 使用闭包函数存储i值
var o = $(‘.blockHead‘); for(var i=0; i<o.length; i++){ o[i].onclick = (function closure(ii){ //var ii; //we save ii in this scope return function(){ alert(ii); } })(i); }
如上,colsure是一个闭包函数(closure函数名可省去,作匿名闭包函数),声明后立即执行,传递了i值,于是在它的函数域里保存了i值(arguments参数列表里);
函数的返回结果是事件处理函数,其参数ii就是colsure里保存的ii值,也就是循环时就传递的i值。
ps:方法一是非常常见的处理该问题的解决方法;在寻找解决方案的过程里,我发现了另一个写法,如下。
方法二: 将事件绑定的代码写在一个外围函数里
var o = $(‘.blockHead‘); for(var i=0; i<o.length; i++){ attach(i,o[i]); function attach(ii,o){ o.onclick = function(){ alert(ii); }; } } //或者 直接在声明函数后立刻执行 var o = $(‘.blockHead‘); for(var i=0; i<o.length; i++){ (function attach(ii,o){ o.onclick = function(){ alert(ii); }; })(i,o[i]); }
同样的道理,在attach的函数域里,onclick事件得到的ii值已经是执行循环便获取的的i,而外部的i执行完循环后的结果是什么已经跟内部没有关系了。
稍许比方法一麻烦的是,参数需要多传递一个元素的引用。
js循环绑定事件
时间: 2024-10-13 16:14:21