使用原生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);
        }
    })

以上內容為自己整理，如有問題評論區歡迎討論學習