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

最新推荐文章于 2022-11-13 16:24:48 发布

转载最新推荐文章于 2022-11-13 16:24:48 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/axl234/p/5501868.html

本文探讨了JavaScript中为多个未知数量的li元素循环添加事件处理程序时出现的问题，并给出了解决方案。通过构建闭包确保每次点击都能正确地获取对应的索引值。

<ul>
  <li>男</li>
  <li>女</li>
  <li>老</li>
  <li>少</li>
</ul>

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

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

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

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

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

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

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

构建一个闭包很简单，代码如下：

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

转载于:https://www.cnblogs.com/axl234/p/5501868.html