JS实现循环给元素绑定事件的几个常用方法

作为一个JS的初学者,想对一些元素循环绑定事件的时候总是出现各种问题,尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查,果然好多初学者有这个困惑,既然这个问题总是出现,于是在我就总结了以下两个比较好理解的解决方案,分享给大家:(可能还有更好的方式我没有发现,请各位前辈分享大笑

比如下面这个例子:


HTML代码:

<div class="wrap">
	    <a href="javascript:;" class="link">第一个链接</a>
	    <a href="javascript:;" class="link">第二个链接</a>
	    <a href="javascript:;" class="link">第三个链接</a>
</div>

JS代码:

window.onload = function() 
{
     var aLi = document.getElementsByTagName("a");
     for(var i = 0; i < aLi.length; i++) 
     {
         aLi[i].onclick = function() 
         {
                alert(i);   //3
         }   
      }
}

运行结果:

发现不管点哪个链接都是弹出“3”,其实在我们调用onclick函数时候,外层循环结束已经结束了,i值结束为3跳出。

那其实换句话说,只要我们能把这个i值动态传到onclick函数里不就可以了。


解决方案一(给aLi一个count用于记录位置):

window.onload = function() 
{
     var aLi = document.getElementsByTagName("a");
     for(var i = 0; i < aLi.length; i++) 
     {
	  aLi[i].count = i;
	  aLi[i].onclick = function() 
	  {
	       alert(this.count);   
	  }   
      } 
}


解决方案二(可以循环给绑定事件的函数动态传入参数,闭包的经典例子):

window.onload = function() 
{
    var aLi = document.getElementsByTagName("a");
    for(var i = 0; i < aLi.length; i++) 
    {
	var a = function(k)
        {
	     aLi[k].onclick = function() 
	     {
		alert(k);
	      }
	}a(i); 
  }  	 
}


如有错误请指出,谢谢




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值