关于js循环添加事件的几种方法总结

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命令的代码块内有效。

阮一峰老师的《ECMAScript6入门》有想学习的猛戳

 var lis = document.querySelectorAll('li');
    for(let i = 0; i < lis.length; i++) {
        lis[i].onclick = function() {
            alert(i);
        }
    }