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>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。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM