JavaScript闭包中的循环（二）

最新推荐文章于 2022-05-12 22:36:58 发布

彼之方

最新推荐文章于 2022-05-12 22:36:58 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript 闭包

本文链接：https://blog.youkuaiyun.com/qq_33745501/article/details/78559265

javascript 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了解决JavaScript中因闭包导致的问题，通过两种方法——即时执行函数表达式(IIFE)和使用外部函数来确保点击事件处理器能正确地引用当前循环变量的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实例一：

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', function() {
      console.log('You clicked element #' + i);
   });

}

为了解决闭包所带来的影响，输出预期的效果。有两种解决方案。

方法一：使用IIFE

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
   nodes[i].addEventListener('click', (function(num) {
      console.log('You clicked element #' + num);
   })(i));
}

方法二：使用外部函数

function handler(i){

     console.log('You clicked element #' + i);
}

var nodes = document.getElementsByTagName('button');

for (var i = 0; i < nodes.length; i++) { 
          nodes[i].addEventListener('click',handler(i));
}