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.csdn.net/xiaozji/article/details/43530563