您的位置：首页 > 其它

循环注册事件的几种写法

2017-04-29 19:05 267 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航