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

最新推荐文章于 2023-09-21 19:09:26 发布

转载最新推荐文章于 2023-09-21 19:09:26 发布 · 1k 阅读

文章标签：

#js #javascript

js常用小函数专栏收录该内容

13 篇文章

订阅专栏

本文探讨了JavaScript中常见的事件绑定问题，特别是当使用循环来绑定事件监听器时，如何正确处理闭包以确保每个元素触发正确的事件响应。提供了两种实用的解决方案。

作为一个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); 
  }       
}

如有错误请指出，谢谢

文章转自https://blog.youkuaiyun.com/kingliguo/article/details/51137647