JS中回應函式和for回圈執行問題-有解無憂

一個簡單的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>[email protected]</td>
            <td>5000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>Tom2</td>
            <td>[email protected]</td>
            <td>5000</td>
            <td><a href="#">Delete</a></td>
        </tr>
        <tr>
            <td>Tom3</td>
            <td>[email protected]</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，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/115158.html

標籤：JavaScript

上一篇：Vue.js 組件+ 自定義指令+路由

下一篇：再接再厲，JSONViewer現已支持Firefox、Microsoft Edge、360瀏覽器，可能是最好用的JSON格式化工具