let用来处理循环事件绑定问题的原理分析

最新推荐文章于 2024-03-18 19:46:50 发布

原创

最新推荐文章于 2024-03-18 19:46:50 发布 · 1.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#let #循环事件监听 #for循环绑定事件 #访问变量 #dom事件

本文探讨了在JavaScript中使用for循环为DOM元素绑定事件时遇到的问题，即事件回调函数中的变量i始终指向最后一个值。通过分析问题产生的原因，如JavaScript的块级作用域缺失、事件响应函数的执行时机以及变量查找规则，提出使用ES6的let关键字来解决。let创建了块级作用域，使得每次循环都有独立的作用域，从而避免了事件处理函数访问到错误的i值。

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

在编写js代码时，有一个问题基本上人人都会遇到，那就是用for循环为一组DOM对象绑定事件响应回调，每个事件回掉函数中i的值都是DOMlist.length。

上代码：

 var btns = document.getElementsByTagName('button');
    for(var i = 0;i<btns.length;i++){
            btns[i].onclick = function () {
   
   
                alert(i);
            }
    }

如果为3个按钮绑定事件，不管点击哪个都会弹出 3，这显然是不符合我们的需求的

具体的原因我们下面详叙，先说两种我们经常用到的解决方法：

1.为每个DOM对象添加一个index属性，记录当前的i值