迴圈註冊事件的幾種寫法

看風景就發表於2017-04-29
事件
<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))
}

 

相關文章