js循环绑定事件解决方案

最新推荐文章于 2022-09-04 21:15:18 发布

平川心

最新推荐文章于 2022-09-04 21:15:18 发布

阅读量289

点赞数

分类专栏： javascript web前端文章标签： javascript 前端解决方案

web前端同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

javascript

12 篇文章 0 订阅

订阅专栏

相信大家都遇到过类似的问题，for循环绑定完事件最后执行的时候都是最后一个事件相同，比如这段代码

    Java代码   
    
  
 <body>  
 <ul id="list">  
 <li>1</li>  
 <li>2</li>  
 <li>3</li>  
 <li>4</li>  
 <li>5</li>  
 </ul>  
 <script>  
 var list_obj = document.getElementsByTagName('li');  
 for (var i = 0; i <= list_obj.length; i++) {        
   list_obj[i].onclick = function() {      
     alert(i);      
   }  
 }  
 </script>  
 </body>  

点击的时候弹出的不是0 1 2 3 4，而是5。

解决方案也很多种，比如可以新建一个function设置一个私有方法，然后每次new一个object然后再绑定到它的方法上。
还有就是闭包，写法相对简单：

    Java代码   
    
  
 <body>  
 <ul id="list">  
 <li>1</li>  
 <li>2</li>  
 <li>3</li>  
 <li>4</li>  
 <li>5</li>  
 </ul>  
 <script>  
 var list_obj = document.getElementsByTagName('li');  
 for (var i = 0; i <= list_obj.length; i++) {      
   (function(){      
     var p = i     
     list_obj[i].onclick = function() {      
       alert(p);      
     }  
   })();  
 }  
 </script>  
 </body>  

就是每个循环加上闭包，然后设置一个临时变量，问题解决。

平川心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js循环绑定事件解决方案

相信大家都遇到过类似的问题，for循环绑定完事件最后执行的时候都是最后一个事件相同，比如这段代码 Java代码 "list"> 1 2 3 4 5 var list_obj = document.getElementsByTagName('li'); for (var i = 0; i li
复制链接

扫一扫