js循环添加事件的问题

1.需求

给下面每个按钮增加事件

<ul id="list">    
　　<li>按钮1</li>    
　　<li>按钮2</li>    
　　<li>按钮3</li>    
　　<li>按钮4</li>    
　　<li>按钮5</li>    
</ul> 

本能的做法就是直接循环添加，如下

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

但这样的i会是最后一个,alert出来的都是最后一个的内容：5.

原因:循环执行完之后，只有一个全局的i变量，值为5.当点击事件触发的时候，事件函数内找不到i，所以去全局找，只能找到全局的i，值为5，所以alert出来的都是5.

2.解决方法

直接执行一个匿名函数，（匿名函数的this为window，要注意）

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

 

参考资料:http://blog.youkuaiyun.com/xiaozji/article/details/43530563

转载于:https://www.cnblogs.com/norm/p/6179204.html