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

本文探讨了在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值

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值