菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
456
0

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

原创
05/13 14:22
阅读数 87172

一个简单的HTML页面,点击delete可以进行删除操作。现在分析其部分的响应函数和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的时候,会出现如下结果:

这里为什么不是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。

 

发表评论

0/200
456 点赞
0 评论
收藏