一、ES5中的var
<body>
<button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> var btns = document.getElementsByTagName('button') for(var i = 0;i < btns.length;i ++){ btns[i].addEventListener('click',function(){ console,log('第' + i + '个按钮被点击') }) }
</script>
</body>
无论点击哪个按钮，都是第三个按钮被点击
原因：var不存在块级作用域，比如for和if
解决方法：设置闭包
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0;i < btns.length;i ++){
(function (i) {
btns[i].addEventListener('click',function() {
console. log('第' + i + '个按钮被点击');
})
})(i)
}
</script>
</body>
为什么可以解决：因为在JavaScript中函数有作用域
二、ES6中的let
<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <script> const btns = document.getElementsByTagName('button'); for(let i = 0;i < btns.length;i ++){ btns[i].addEventListener('click',function() { console. log('第' + i + '个按钮被点击'); }) } </script> </body>
执行结果正确
ES6引入了let有了自己的作用域，如if、for
不将var修改的原因：防止浏览器不兼容以及开发者不适应