首页 > 代码库 > 循环注册事件的几种写法
循环注册事件的几种写法
<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)) }
循环注册事件的几种写法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。