提出问题

<ul>
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
</ul>
<script>
    var lis = document.getElementsByTagName("li")
    for(var i = 0;i<lis.length;i++){
        lis[i].onclick = function(){
            alert(i) // 全部都显示3
        }
    }
</script>

执行结果：点击 li 标签，全部都显示 3

原因：因为js的函数是调用时触发，绑定事件的时候 i 值并没有被传入执行函数里。触发事件时，循环已经结束，此时的 i 值为 索引最大值

解决

方式一：封装函数

// 定义函数
function f(dom,value){ // 此时value的值就确定了，不会随着变量i的值改变
    dom.onclick = function(){
        alert(value)
    }
}
var lis = document.getElementsByTagName("li")
for(var i = 0;i<lis.length;i++){
    f(lis[i],i)// 调用函数，传入变量i
}

方式二：闭包

使用闭包函数存储i值

function f(value){// 此时value的值就确定了，不会随着变量i的值改变
    return function(){
        alert(value)
    }
}
var lis = document.getElementsByTagName("li")
for(var i = 0;i<lis.length;i++){
    // 调用函数，传入变量i
    lis[i].onclick = f(i)
}