js遍历添加事件索引问题

项目场景：

通过遍历添加点击事件时，想要获取点击元素的索引，但是索引都是元素长度的 length

---

问题原因：

for循环的问题

• for循环的执行过程为，先执行语句1 ，也就是声明i值，并且赋值为0，然后判断小于3，然后执行大括号中的语句，然后再++i；
• 因为用var 声明的为全局变量，循环结束后i值为3，事件发生以后向函数外部查询i值，结果就为4.
  例子

for (var i = 0; i < 3; i++) {
            console.log('循环中的i='+ i);
        }
 console.log('循环结束后的i='+i)

---

解决方法

1用let声明函数

在循环中，每次循环let声明的会形成一个单独的作用域，在这个作用域中，i值就等于作用域中的i值。

 for (let i = 0; i < btns.length; i++) {
                btns[i].onclick=function(){
                    console.log('元素索引为'+i);
                }
            }

2 给每个元素添加一个自定义属性

自定义属性等于当前的i值。

 for (var i = 0; i < btns.length; i++) {
                btns[i].dataset.index=i
                btns[i].onclick=function(){
                    console.log('元素索引为'+this.dataset.index);
                }
            }

3 自执行函数

在添加事件外部，添加一个自执行函数，每次循环都会执行，同时，通过形参，传入当前循环中的i值。

for (var i = 0; i < btns.length; i++) {
                (function (i) {
                        btns[i].onclick = function () {
                            console.log('元素索引为' + i);
                        }
                    }
                )(i)

            }