JavaScript循环绑定事件

1、一般逻辑，对li标签循环绑定click事件，但会出现“闭包问题”

<ul>
    <li style="list-style:none;border: 1px solid gray;">第一个</li>
    <li style="list-style:none;border: 1px solid gray;">第二个</li>
    <li style="list-style:none;border: 1px solid gray;">第三个</li>
    <li style="list-style:none;border: 1px solid gray;">第四个</li>
    <li style="list-style:none;border: 1px solid gray;">第五个</li>
    <li style="list-style:none;border: 1px solid gray;">第六个</li>
</ul>
<script>
    var liArr=document.querySelectorAll('li');
    for(var i = 0;i<liArr.length;i++){
        liArr[i].οnclick=function(){
            alert(i);
        }
    }
</script>

但是无论单击哪个li，都弹出6，这就是js特性。

2、匿名函数解决

            var liArr=document.querySelectorAll('li');
            for(var i = 0;i<liArr.length;i++){
                (function(k){
                    liArr[k].onclick=function(){
                        alert(k);
                    }
                }(i))
            }

3、let 声明 解决

            var liArr=document.querySelectorAll('li');
            for(let i = 0;i<liArr.length;i++){
                liArr[i].onclick=function(){
                    alert(i);
                }
            }

4、foreach 解决

    liArr.forEach(function (ele,idx) {
        ele.onclick=function () {
            alert(idx);
        }
    })