JS中for循环出现的问题：如何给li元素绑定事件，点击每个li元素弹出对应的索引？

本文探讨了在JavaScript中为多个HTML元素绑定点击事件时，如何正确获取元素索引的问题。通过实例展示了直接使用循环变量作为回调函数参数可能导致的问题，并提供了三种解决方案。

刚开始遇到一个问题就是我在HTML中写了四个< li >标签，想给每个li 绑定一个点击事件，通过点击每个li ,弹出它对应的索引，刚开始是这么做的：

<html>
<head>
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
        li[i].onclick=function(){
            alert(i);
            }   
}
}
</script>
</head>
<body>
<ul>
 <li>li1</li>
 <li>li2</li>
 <li>li3</li>
 <li>li4</li>
</ul>
</body>
</html>

运行的时候发现点击任何一个li都弹出的是4，后来找到原因，在点击li元素时，触发点击事件，此时for循环已经结束，其中得 i 已经变为4。因此触发事件中alert(i)函数弹出的永远是4。
解决办法：使用匿名函数。把上面for循环改为如下代码

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

    })(i)

我们使用了一个匿名函数，(function(num){ })(i),这个方法是怎么执行的可以参考[js中的匿名函数](http://blog.youkuaiyun.com/clh386/article/details/78560136并立即执行它，由于是按值传递，参数i会传递给参数 num,这样的话，每执行一次for循环，就会给li [i]创建一个num副本，也就是在内存中开辟一个空间存入num的值，这样每个li都会有对应的num值。

这个问题还有其他解决方法：

方法一

var li=document.getElementsByTagName("li");

   for(var i=0;i<li.length;i++){

　　　　li[i].index = i; //给每个li定义一个属性索引值，赋

　　　  li[i].onclick = function(){

　　　　　　alert("下标索引值为："+this.index);    //    索引值从0开始

　　　　}

   }

方法二

var li=document.getElementsByTagName("li");
   for(var i = 0; i<li.length; i++){
        li[i].onclick = function(n){
    　　　　return function(){
                alert("下标索引值为："+n);    //    索引值从0开始
            }
    　　}(i)
    }