循环注册事件的几种写法

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        var node = document.querySelectorAll('ul li')
        for(var i = 0;i<node.length;i++){
            node[i].addEventListener('click',function(){
                alert('click'+i)
            })
        }
    </script>
</body>

上面的写法得到的结果都是终值3。

有几种写法可以得到期望的值：

1.闭包

var node = document.querySelectorAll('ul li')
for(var i = 0;i<node.length;i++){
    (function(i){
        node[i].addEventListener('click',function(){
            alert('click'+i)
        })
    })(i)
}

2.forEach(形成匿名闭包)

var node = document.querySelectorAll('ul li')
Array.from(node).forEach(function(nodeItem,index){
    nodeItem.addEventListener('click',function(){
        alert('click'+index)
    })
})

3.let(形成匿名闭包)

var node = document.querySelectorAll('ul li')
for(let i = 0;i<node.length;i++){
    node[i].addEventListener('click',function(){
        alert('click'+i)
    })
}

4.bind方法

var node = document.querySelectorAll('ul li')
for(var i = 0;i<node.length;i++){
    node[i].addEventListener('click',function(i){
        alert('click'+i)
    }.bind(null,i))
}