JavaScript中事件处理函数变量i下标问题

JavaScript中事件处理函数变量i下标问题

给li绑定点击事件，点击时打印li的下标

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

var li=document.getElementsByTagName("li")
        for(var i=0;i<li.length;i++){
            li[i].onclick=function(){
                console.log(i);
            }
        }

这时我们会发现，点击元素时拿到的是循环结束后变量i的取值，也就是无论点击哪个li，打印的都是5。
这是因为执行点击操作时，for循环已经完成，此时i的值已经是5了，所以无论点击哪个按钮，显示的都是5。

解决方案

方法一

自定义索引保存下标

       for(var i=0;i<li.length;i++){
            li[i].index=i;
            li[i].onclick=function(){
                console.log(this.index);
                //this是当前被点击的li元素
                //用自定义的下标索引来代替i
            }
        }

方法二

立即执行函数结合闭包

for (var i = 0; i < li.length; i++) {
        (function (i) {
          li[i].onclick = function () {
            console.log(i)
          };
        })(i)
        //立即执行匿名函数，传递下标i(实参)
        //立即执行函数传入的实参为0-4，所以点击事件的形参接收到的是0-4
      }

方法三

使用ES6的let关键字

        for(let i=0;i<li.length;i++){
            li[i].onclick=function(){
                console.log(i);
            }
        }