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

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

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

<script type="text/javascript">
        var list=document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
                list[i].οnclick=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].οnclick=function(){
                    alert(j);
                };
            })(i);
        }
script>

方法二:

<script type="text/javascript">
        var list=document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
                list[i].οnclick=(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].οnclick=function(){
                        alert(i);
                };
        }
script>

你可能感兴趣的:(JS)