js循环绑定事件解决方案

最新推荐文章于 2022-08-18 14:52:46 发布

iteye_5364

最新推荐文章于 2022-08-18 14:52:46 发布

阅读量269

点赞数

分类专栏： js 文章标签： js ViewUI

本文链接：https://blog.csdn.net/iteye_5364/article/details/82211259

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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


<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然后再绑定到它的方法上。
还有就是闭包，写法相对简单：


<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>

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

这个问题遇到过多次了，每次都要烦一下，今天记录之。

iteye_5364

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录