【JavaScript】点击li输出当前索引

说明：
JavaScript实现一个点击当前li标签并输出当前li的索引的几种实现方式

一、用es6的let声明变量创建一块级作用域

let op = document.getElementsByTagName('li')

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

二、用var声明变量会创造一个全局的临时变量，并且会被新的值覆盖，需手动添加Index值

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

三、事件委托，原理同二

for(var i = 0 ; i < op.length ; i++){
    op[i].index = i 
    op[i].addEventListener('click',function(){
        console.log(this.index)
    },false)
}

四、创建立即执行函数,可立即执行函数的局部变量，并且不会污染全局变量

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