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