最近在学习前端相关的知识，对于JS的语法也是有了一定程度的了解。其中发现了一个比较有意思的bug，便记录下来。
相关代码贴在文末！
首先在html中写5个按钮，并在其内添加多选框，具体的可以参考文末的代码，当我在使用for循环对这些按钮进行遍历设置点击事件监听的时候，发现页面上的按钮怎么也点不动，毫无反应，如下图所示：
这是为什么呢？其实原因也很简单，我这里是写了5个按钮，那么 allButtons.length的值为5，如下图代码所示，当循环结束的时候，代码给第5个button设置了点击事件，此时的 i=4 ，循环结束，但结束后的 i 并没有像Java中那样被回收掉，因为 var 变量是全局变量，所以当点击事件触发的时候，程序会将点击时候的 i 的值赋值给代码块引用的地方，也就是 i=5 ，这个时候在按照下标去获取数组中的button对象是找不到的。（如果使用浏览器调试的话就会看到，当你点击按钮的时候，这个时候的button是undifined）
知道问题的原因了，要怎么解决呢？这里先说说ES6的新语法，let关键字，这个关键字代表的是变量是局部变量，也就是变量所在的代码块执行完毕就会类似Java被回收掉。如下图所示：
这个时候刷新页面，点击button是正常的。
兼容ES5的解决办法
但是，这是使用了新语法，如果浏览器不支持新语法怎么办呢？总不能怪别人的浏览器吧？优秀的程序员一定是会不断的去完善自己的代码的，所以就有了第二种方法：传参。其实有过Android开发经验的都知道，点击事件是会默认传参的，只不过传的是点击对象。其实JS中的这个点击事件也是可以传参的，只不过传的是evt 也就是事件对象，但是在事件对象中是包含了一个你点击的对象的（button对象），所以就可以像下面 这样解决这个问题了。刷新页面后的效果和上面的方法是一样的。
附完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ES5_Bug</title>
<style type="text/css">
button {
background-color: red;
border-radius: 0;
border-width: 0;
width: 100px;
height: 30px;
outline: none;
}
#buttons {
width: 600px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="buttons">
<button><input type="checkbox" disabled>value1</button>
<button><input type="checkbox" disabled>value2</button>
<button><input type="checkbox" disabled>value3</button>
<button><input type="checkbox" disabled>value4</button>
<button><input type="checkbox" disabled>value5</button>
</div>
<script type="text/javascript">
const allButtons = document.querySelectorAll('#buttons>button')
for (var i = 0; i < allButtons.length; i++) {
allButtons[i].addEventListener('click', (evt) => {
//这里使用i会触发隐藏bug，由于for循环里的i是var全局变量，在事件赋值完毕后i的值会继续加1并在回调中使用
// var checkbox = allButtons[i].firstChild
var checkbox = evt.target.firstChild
checkbox.checked = !checkbox.checked
evt.target.style.backgroundColor = checkbox.checked ? 'green' : 'red'
})
}
</script>
</body>
</html>
