使用原生js给每个li绑定onclick点击事件,输出每条li的下标（索引）的几种方式

使用原生js给每个li绑定onclick点击事件,输出每条li的下标（索引）

htm部分

    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>

首先需要获取页面中每一条li节点

    var lis=document.querySelectorAll('li');

1、通过设置属性方式 给每一条li设置属性index为i， 点击时就可以获取this的index属性。

    for(var i=0;i<lis.length;i++){
        lis[i].index=i;
        lis[i].onclick=function(){
              console.log(this.index);
        }
    }

2、通过设置自定义属性方式， 给每一条li设置自定义属性index为i， 点击时就可以获取this的自定义属性index，同上面方法相似。

    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i);
        lis[i].onclick=function(){
              console.log(this.getAttribute('index'));
        }
    }

3、通过bind改变this指向为每一条li，传入第二个参数为i，在点击时就可以获取到i。

    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(i){
              console.log(i,this);
        }.bind(lis[i],i);
    }

4、通过通过闭包自执行函数方式 ，传入参数i，在函数内容返回一个函数体 赋值给每一条点击的li。

    for(var i=0;i<lis.length;i++){
        //自执行函数把i作为实参，传递进去了，在内层函数进行使用
        lis[i].onclick=(function(index){
           // 每个事件都构成了一个闭包，每个闭包里都有一个自己的iindex
            return function(){
                console.log(index);
            }
        })(i);
    }

5、通过let 的块级作用域特点 获取到的是每个独立的i。

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

6、通过数组forEach方式 无论箭头函数还是普通函数都能拿到index

    lis.forEach(function(item,index){
        item.onclick=function(){
            console.log(index);
        }
    })

    lis.forEach(function(item,index){
        item.onclick=()=>{
            console.log(index);
        }
    })

    lis.forEach((item,index)=>{
        item.onclick=()=>{
            console.log(index);
        }
    })

以上内容为自己整理，如有问题评论区欢迎讨论学习