js循环绑定事件解决方案

最新推荐文章于 2022-05-08 20:13:34 发布

原创最新推荐文章于 2022-05-08 20:13:34 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #ViewUI

js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在JavaScript中使用for循环绑定事件时出现的事件执行顺序错误问题，并提供了两种解决方案：使用私有方法和闭包。通过实践案例，帮助开发者理解并解决此类常见问题。

相信大家都遇到过类似的问题，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>