循环注册事件的几种写法

最新推荐文章于 2021-09-25 17:49:40 发布

weixin_30888413

最新推荐文章于 2021-09-25 17:49:40 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/mengff/p/6785873.html

版权

<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))
}

转载于:https://www.cnblogs.com/mengff/p/6785873.html