for循环和函数常见问题

web大菜鸡

已于 2022-05-09 18:45:13 修改

阅读量287

点赞数

分类专栏： JavaSsript 文章标签： javascript

于 2022-05-06 21:02:37 首次发布

本文链接：https://blog.csdn.net/qq_53066188/article/details/124618691

版权

JavaSsript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客探讨了JavaScript中使用querySelectorAll获取元素数组并遍历应用事件监听器的问题。在for循环中，为每个li元素设置点击事件，导致在事件触发时，由于作用域问题，打印出的list[i]为undefined。博客深入解析了闭包和作用域在事件处理中的影响，并提供了优化解决方案。

摘要由CSDN通过智能技术生成

  var list = document.querySelectorAll('ul li '); //list是个数组
        for(var i = 0; i < list.length; i++){
            list[i].onclick = function(){
                //this指的是
                this.style.color = 'red'; //改变颜色

                console.log(list[i]);  //undefinded
            }
        }

1.for循环执行会打印出10个语句,每个语句点击都会触发对应的函数,这个时候循环遍历(list[i])已经结束了,再打印循环遍历list[i]肯定为undefinded

2.for循环第一遍的是语句,console.log(list[i])，在函数作用域内向上寻找值只能找到i 和list，因为已经定义了,无法找到list[i]的值