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

html：

        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
            <li>eee</li>
        </ul>

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

<script type='text/javascript'>
    list = document.getElementsByTagName('li')
    for(var i = 0; i < list.length; i++){
        list[i].index = i
        list[i].onclick = function(){
            console.log(this.index)
        }
    }
</script>

方法二：通过 let 的块级作用域特点，获取到的是每个独立的 i。

<script type='text/javascript'>
    list = document.getElementsByTagName('li')
    for(let i = 0; i < list.length; i++){
        list[i].onclick = function(){
            console.log(i)
        }
    }
</script>

let 和 const 都具有块级作用域的特点

例如：

<script type='text/javascript'>
    {
        console.log(a)
        console.log(b)
        var a = 1
        let b = 2
    }
</script>

<script type='text/javascript'>
    {
        var a = 1
        let b = 2
    }
    console.log(a)
    console.log(b)
</script>

方法三：通过设置自定义属性方式， 给每一条 li 设置自定义属性 index 为 i， 点击时就可以获取 this 的自定义属性 index。

<script type='text/javascript'>
    list = document.getElementsByTagName('li')
    for(var i = 0; i < list.length; i++){
        list[i].setAttribute('index',i)
        list[i].onclick = function(){
            console.log(this.getAttribute('index'))
        }
    }
</script>

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

<script type='text/javascript'>
    list = document.getElementsByTagName('li')
    for(var i = 0; i < list.length; i++){
        list[i].onclick = function(i){
            console.log(i)
        }.bind(list[i],i)
    }
</script>

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

<script type='text/javascript'>
    list = document.getElementsByTagName('li')
    for(var i = 0; i < list.length; i++){
        list[i].onclick = (function(index){
            return function(){
                console.log(index)
            }
        })(i)
    }
</script>

方法六：通过数组 forEach 方式，无论箭头函数还是普通函数都能拿到 index。

<script type='text/javascript'>
    list = document.getElementsByTagName('li')
    list = Array.from(list)

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

    list.forEach(function(item,index){
        item.onclick=function(){
            console.log(index);
        }
    })
</script>

Array.from() 方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。
将类数组对象转换为真正数组