欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JS中响应函数和for循环执行问题

程序员文章站 2022-07-09 19:51:05
一个简单的HTML页面，点击delete可以进行删除操作。现在分析其部分的响应函数和for循环的问题，其余省略。 给出其HTML代码：

一个简单的html页面，点击delete可以进行删除操作。现在分析其部分的响应函数和for循环的问题，其余省略。

JS中响应函数和for循环执行问题

 

给出其html代码：

<body>
    <table id="employeetable" border="1" cellspacing="0">
        <tr>
            <th>name</th>
            <th>email</th>
            <th>salary</th>
            <th>&nbsp</th>
        </tr>
        <tr>
            <td>tom1</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#">delete</a></td>
        </tr>
        <tr>
            <td>tom2</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#">delete</a></td>
        </tr>
        <tr>
            <td>tom3</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#">delete</a></td>
        </tr>
    </table>
</body>

仔细分析js代码：

<script>
        window.onload = function () {
            //获取所有的超链接
            var alla = document.getelementsbytagname("a");
            
            //为每一个超链接绑定一个单击响应函数
            for (var i = 0; i < alla.length; i++) {
               alla[i].onclick = function () {

                    alert(alla[i]);               
                }
            }
        }
 </script>

当在浏览器点击delete的时候，会出现如下结果：

JS中响应函数和for循环执行问题

这里为什么不是alla[i]呢？继续看下面的代码：

 <script>
        window.onload = function () {
            //获取所有的超链接
            var alla = document.getelementsbytagname("a");
            
            //为每一个超链接绑定一个单击响应函数
            for (var i = 0; i < alla.length; i++) {

                alert("for循环正在执行"+i);

                alla[i].onclick = function () {

                    alert("响应函数正在执行"+i);
     
                }
            }

        }
    </script>

 原来for循环会在页面加载完就立即执行，而响应函数是在点击的时候才会执行，此时i经过for循环已经成为3了，超过了数组下标，所以显示undefined。

 

上一篇： 孙权并不喜欢张昭，为什么还在他死后身着素服去吊唁？

下一篇： python如何编码输出三角形字符阵列

推荐阅读

Name