js循环绑定事件解决方案

转载 2015年11月20日 10:40:01
相信大家都遇到过类似的问题,for循环绑定完事件最后执行的时候都是最后一个事件相同,比如这段代码 
Java代码  收藏代码
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {        
  12.   list_obj[i].onclick = function() {      
  13.     alert(i);      
  14.   }  
  15. }  
  16. </script>  
  17. </body>  

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

解决方案也很多种,比如可以新建一个function设置一个私有方法,然后每次new一个object然后再绑定到它的方法上。 
还有就是闭包,写法相对简单: 
Java代码  收藏代码
  1. <body>  
  2. <ul id="list">  
  3. <li>1</li>  
  4. <li>2</li>  
  5. <li>3</li>  
  6. <li>4</li>  
  7. <li>5</li>  
  8. </ul>  
  9. <script>  
  10. var list_obj = document.getElementsByTagName('li');  
  11. for (var i = 0; i <= list_obj.length; i++) {      
  12.   (function(){      
  13.     var p = i     
  14.     list_obj[i].onclick = function() {      
  15.       alert(p);      
  16.     }  
  17.   })();  
  18. }  
  19. </script>  
  20. </body>  

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

Js循环绑定事件处理

很多时候我们在开发过程需要for循环给元素组绑定js事件,但是直接敲的话,事件响应的效果只能和最后一个元素一样,如下面的错误代码: js闭包运用 1 2 3 var...
  • Szu_AKer
  • Szu_AKer
  • 2016年06月15日 17:05
  • 1087

JavaScript 在for循环中绑定事件

有时候要对响应一堆相似的事件,但是每个事件的参数都不同,一开始还以为挺简单的,用个for循环不就得了,结果发现,额,都是使用了最后一个参数。。。 上网查资料!!!结果大神说用闭包解决 代码: ...
  • u011320646
  • u011320646
  • 2013年11月30日 23:12
  • 2098

JavaScript闭包及实现循环绑定事件

一、JavaScript作用域: var scope="global"; function t(){ console.log(scope); //"undefined" var sco...
  • ligang2585116
  • ligang2585116
  • 2014年12月14日 23:53
  • 1376

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

作为一个JS的初学者,想对一些元素循环绑定事件的时候总是出现各种问题,尤其是在对闭包没有熟练掌握的时候更是一头雾水。网上一查,果然好多初学者有这个困惑,既然这个问题总是出现,于是在我就总结了以下两个比...
  • kingliguo
  • kingliguo
  • 2016年04月12日 21:56
  • 4484

js循环给li绑定事件实现 点击li弹出其索引值 和内容

html代码     香蕉   苹果      菠萝   猕猴桃   芒果   方法一:    var itemli = document.getElementsByTagNam...
  • WangJiangNan17214
  • WangJiangNan17214
  • 2017年02月14日 16:40
  • 992

jquery遍历给每个子元素绑定事件

代码如下: $(function(){ $('.evals>li').each(function(index){ $(this).on('click',function(){ ...
  • u014479505
  • u014479505
  • 2016年01月20日 15:11
  • 8594

JS 循环绑定多个元素的点击事件时出现的闭包问题与解决方案

昨天在循环绑定多个a标签的点击事件时出现了不少问题,首先是 js 的典型闭包问题,这个还好以前也遇到过,于是很快解决了,但是在为多个a标签绑定点击事件成功之后,本来以为就大功告成了,结果居然是在页面加...
  • Inite
  • Inite
  • 2017年11月27日 21:32
  • 172

jquery循环绑定事件有一个坑----总是绑定最后一个元素

1. 先看一段用jquery循环绑定事件的代码,要求是对每个元素都作事件绑定。结果在绑定事件中只能得到最后一个值,如下代码片段1所示: var checkMutipleChoices=[{quest...
  • budapest
  • budapest
  • 2017年08月04日 18:33
  • 539

js循环绑定事件

1     2     3     4             var ali = document.getElementsByTagName('a');         for(var i=0;i...
  • chanda_yang
  • chanda_yang
  • 2016年08月15日 21:31
  • 99

循环按钮添加事件总是执行最后一个的解决办法汇总

当我想要给一组链接添加点击事件,改变当前点击的链接的字体颜色时,很快这样的代码出现了,并且是确实成功改变了当前的点击的字体的颜色。 HTML: 按钮1 按钮2 按钮3 按钮4 按钮5 ...
  • oiu1010110
  • oiu1010110
  • 2017年03月17日 21:19
  • 209
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js循环绑定事件解决方案
举报原因:
原因补充:

(最多只允许输入30个字)