JS循环给li添加单击事件时总是弹出最后一个i值

最新推荐文章于 2023-09-01 10:33:00 发布

jojo付啾啾

最新推荐文章于 2023-09-01 10:33:00 发布

阅读量2.4k

点赞数 1

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

本文链接：https://blog.csdn.net/DreamFJ/article/details/61923078

版权

JS 专栏收录该内容

116 篇文章 1 订阅

订阅专栏

<body>
    <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>

题目：单击列表项弹出对应的数字。
错误方法：

<script type="text/javascript">
        var list=document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
                list[i].onclick=function(){
                        alert(i);
                };
        }
</script>

运行结果：不管点哪一个列表项都会弹出4。
原因分析（自己的一点理解，不知道对不对）：js是单线程的，先执行完主线程上的任务，再执行“任务队列”（事件队列）中的任务，当单击列表项时主线程中的i的值已经变成4了，所以每次单击时会弹出4。
可以看看阮一峰老师对JS运行机制的讲解

对于上面出现的问题可以用闭包来解决。将i作为函数参数（值传递）传递给内部函数。
方法一：

<script type="text/javascript">
        var list=document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            (function(j){   
                list[j].onclick=function(){
                    alert(j);
                };
            })(i);
        }
</script>

方法二：

<script type="text/javascript">
        var list=document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
                list[i].onclick=(function(j){
                    return function(){
                        alert(j);
                    }
                })(i);
        }
</script>

还有一种方法是ES6里的，用let定义变量，会产生块级作用域。
方法三：

<script type="text/javascript">
        var list=document.getElementsByTagName("li");
        for (let i = 0; i < list.length; i++) {
                list[i].onclick=function(){
                        alert(i);
                };
        }
</script>