关于在for循环中绑定事件打印变量i是最后一次。

参考：

1.https://www.cnblogs.com/liao8735/p/3944913.html

2.https://www.cnblogs.com/pssp/p/5215417.html

在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定，循环对元素的事件进行赋值，在这个过程中我们会遇到一个问题，那就每个元素事件运行的时候变量怎么都是相同的值。

这里涉及到变量的作用域的问题，可以用闭包来解决这个问题。

这里举个简单的列子来说明：

我们来给这些li添加一个onclick事件，弹出li是第几条数据

var list = document.getElementById("ulDemo").getElementsByTagName("li");
 for (var i = 0; i < list.length; i++) {
     var li = list[i];
     li.onclick= function () {
         alert("第" + (i + 1) + "条" + this.innerHTML);
     }
 }

结果弹出的都是第6条数据，这里的onclick函数中的变量i指向的内存地址，经过循环之后i变成了5，所有的li的点击事件都在同一个作用域中，我们可以通过闭包把i的作用域独立出来

var list = document.getElementById("ulDemo").getElementsByTagName("li");
      for (var i = 0; i < list.length; i++) {
          var li = list[i];
          li.onclick= (function (index) {
              return function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
          })(i);
      }

其他写法

for (var i = 0; i < list.length; i++) {
           var li = list[i];
 
           var addClick = function (el, index) {
               el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
           };
 
           addClick(li, i);
       }

for (var i = 0; i < list.length; i++) {
           var li = list[i];
 
           (function (el,index) {
               el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
           })(li,i);
       }

做有积累的事~~