js解决循环添加事件的几种方法小总结
平日里有点问题也会思考思考，比如循环添加事件的这个梗，初入前端的朋友可能就会踩到这个坑，今天特意总结，以后好提醒自己！话不多说直接进入正题~
问题的原因：变量i是var声明的，在全局范围内都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出的是最后一轮的i的值
/*html*/
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
/*style*/
li{
width: 300px;
height: 48px;
line-height: 48px;
background: #218868;
color: #fff;
list-style: none;
margin-top: 5px;
text-align: center;
}
解决方法一：闭包
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++) {
(function(a){
lis[a].onclick = function(){
alert(lis[a].innerText);
}
})(i);
}
解决方法二：用变量记录
var lis = document.querySelectorAll('li');
for(var i = 0; i < lis.length; i++) {
lis[i].num = i;
lis[i].onclick = function() {
alert(this.num);
}
}
解决办法三：使用ES6：let
ES6新增了let命令来声明变量。它的用法类似于var，但是所剩名的变量只在let命令的代码块内有效。
var lis = document.querySelectorAll('li');
for(let i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
alert(i);
}
}
