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