JS闭包导致循环给按钮添加事件时总是执行最后一个

原创

于 2015-02-05 17:17:06 发布 · 1.8w 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#闭包 #js

今天再做需求时有一个功能是这样的，就是有不定个的按钮，且点击按钮时都需要执行一个方法（参数不一样）

那么我很自然的就想到了，循环给每个按钮添加事件和参数就好了，由于不方便上传系统代码，下面以一个简单例子来说明.

<pre name="code" class="html"><html>
<body>
<ul id="list">  
<li>按钮1</li>  
<li>按钮2</li>  
<li>按钮3</li>  
<li>按钮4</li>  
<li>按钮5</li>  
</ul>    
</body>
</html>

比如现在要实现这么一个功能，在页面上点击上面的按钮1到按钮5时分别alert出1,2,3,4,5.

那么很多人自然想到如下这么做：

加入如下脚本代码：

<script>  
var list_obj = document.getElementsByTagName('li');  
for (var i = 0; i <= list_obj.length; i++) {        
  list_obj[i].onclick = function() {      
    alert(i);      
  }  
}
</script>

运行后，奇怪的发现无论点击那个li标签，alert出的都是最后一个的内容，5