首页 > 代码库 > js循环绑定事件

js循环绑定事件

2024-07-18 21:59:15   225人阅读

在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值。

ｐｓ：方法一是非常常见的处理该问题的解决方法；在寻找解决方案的过程里，我发现了另一个写法，如下。

 

方法二：　将事件绑定的代码写在一个外围函数里　

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执行完循环后的结果是什么已经跟内部没有关系了。

      稍许比方法一麻烦的是，参数需要多传递一个元素的引用。

 


联系
我们