循环注册事件的几种写法

Posted 2020-09-15 等风来

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了循环注册事件的几种写法相关的知识，希望对你有一定的参考价值。

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

以上是关于循环注册事件的几种写法的主要内容，如果未能解决你的问题，请参考以下文章

python 学习笔记（循环，print的几种写法，操作符）

JS写法之字符串每个单词首字母都大写的几种方法