一個簡單的HTML頁面，點擊delete可以進行刪除操作。現在分析其部分的響應函數和for迴圈的問題，其餘省略。 給出其HTML代碼： <body> <table id="employeeTable" border="1" cellspacing="0"> <tr> <th>Name</th> <t ...
一個簡單的HTML頁面，點擊delete可以進行刪除操作。現在分析其部分的響應函數和for迴圈的問題，其餘省略。
給出其HTML代碼：
<body> <table id="employeeTable" border="1" cellspacing="0"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </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。
