JS给元素循环添加事件的问题

文章2020-06-06419 人已阅来源:axl234
<ul>
  <li>男</li>
  <li>女</li>
  <li>老</li>
  <li>少</li>
</ul>

使用js为多个未知数量的li循环添加事件的时候很容易想到如下代码

<script>
  for (var i = 0, lis = document.getElementsByTagName("li"), len = lis.length; i < len; i++) {
    lis[i].onclick = function () {
      alert(i);
    }
  }
</script>

但是每次点击都会执行最后一次的结果 alert弹出4

因为在for循环里面指定给lis[i].onclick的事件处理程序,也就是onclick那个匿名函数是在for循环执行完成后(用户单击链接时)才被调用的。而调用时,需要对变量i求值,解析程序首先会在事件处理程序内部查找,但i没有定义。然后,又到方法外部去查找,此时有定义,但i的值是4(只有i大于4才会停止执行for循环)。因此,就会取得该值——这正是闭包(匿名函数)要使用其外部作用域中变量的结果。而且,这也是由于匿名函数本身无法传递参数(故而无法维护自己的作用域)造成的。

那现在原因是知道了,如何来避免这种情况呢?

既然已经知道函数调用外部变量的时候就构成了一个闭包,里面的变量会受到别的地方的影响,那么我们

现在要做的就是,构建一个只有自己本身才可访问的闭包,保存只供本身使用的变量

构建一个闭包很简单,代码如下:

<script>
  for (var i = 0, lis = document.getElementsByTagName("li"), len = lis.length; i < len; i++) {
    (function (i) {
      lis[i].onclick = function () {
        alert(i);
      }
    })(i);
  }
</script>