首頁猿問請問為什么把代碼精簡后運行達不到效果。

請問為什么把代碼精簡后運行達不到效果。

JavaScript

weibo_和諧_漢子_0 2017-04-27 10:05:06

<!DOCTYPE?html> <html> <head> ????<title>?new?document?</title> ????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"/> ????<script?type="text/javascript"> ????????function?bgcChange(obj){ ????????????obj.onmouseover=function(){ ????????????????obj.style.backgroundColor="#f2f2f2"; ????????????} ????????????obj.onmouseout=function(){ ????????????????obj.style.backgroundColor="#fff"; ????????????} ????????} ????????window.onload?=?function(){//進入頁面時，對已經(jīng)有的td注冊鼠標事件。 ????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。 ????????????var?ttd=document.getElementsByTagName("td"); ????????????for(var?i=0;i<ttd.length;i++){//執(zhí)行完所有循環(huán)后，給每一個td注冊onmuseover和onmouseout事件； ????????????????bgcChange(ttd[i]); ????????????} ????????} ????</script> ????<style?type="text/css"> ????????td{ ????????????width:?30%; ????????????height:?20px; ????????} ????</style> </head> <body> <table?border="1"?width="50%"?id="table"> ????<tr> ????????<th>學號</th> ????????<th>姓名</th> ????????<th>操作</th> ????</tr> ????<tr> ????????<td>xh001</td> ????????<td>王小明</td> ????????<td><a?href="javascript:;"?onclick="del(this)">刪除</a></td>??? ????</tr> ????<tr> ????????<td>xh002</td> ????????<td>劉小芳</td> ????????<td><a?href="javascript:;"?onclick="del(this)">刪除</a></td>??? ????</tr> </table> </body> </html>?function bgcChange(obj){ ? ? ? ? ? ?obj.onmouseover=function(){ ? ? ? ? ? ? ? ?obj.style.backgroundColor="#f2f2f2"; ? ? ? ? ? ?} ? ? ? ? ? ?obj.onmouseout=function(){ ? ? ? ? ? ? ? ?obj.style.backgroundColor="#fff"; ? ? ? ? ? ?} ? ? ? ?} ? ? ? ?window.onload = function(){ ? ? ? ? ? ?var ttd=document.getElementsByTagName("td"); ? ? ? ? ? ?for(var i=0;i<ttd.length;i++){ ? ? ? ? ? ? ? ?bgcChange(ttd[i]); ? ? ? ? ? ?} ? ? ? ?}其中上面的代碼為什么不能簡寫成下面的：試過了，下面的代碼運行達不到想要的效果。?window.onload = function(){? ? ? ? ? ?var ttd=document.getElementsByTagName("td");? ? ? ? ? ?for(var i=0;i<ttd.length;i++){? ? ? ? ? ? ?? ?ttd[i].onmouseover=function(){? ? ? ? ? ? ? ??????????ttd[i].style.backgroundColor="#f2f2f2";? ? ? ? ? ?????}? ? ? ? ? ?????ttd[i].onmouseout=function(){? ? ? ? ? ????????? ? ??ttd[i].style.backgroundColor="#fff";? ? ? ? ? ?????}????????????????}? }? ? ? ? ? ?? ? ? ?

查看完整描述

1 回答

tom的貓

TA貢獻65條經(jīng)驗獲得超35個贊

window.onload?=?function(){
???????????var?ttd=document.getElementsByTagName("td");
???????????for(var?i=0;i<ttd.length;i++){
????????????????ttd[i].onmouseover=function(){
????????????????????????this.style.backgroundColor="#f2f2f2";
???????????????}
???????????????ttd[i].onmouseout=function(){
????????????????????????this.style.backgroundColor="#fff";
???????????????}????
????????????}
		}

因為js執(zhí)行順序是按照代碼塊來進行預處理和執(zhí)行的，也就是說預處理的只是執(zhí)行到的代碼塊的聲明函數(shù)和變量，而對于還未加載的代碼塊，是沒法進行預處理的，上面的代碼中會先執(zhí)行for循環(huán)的代碼塊，然后再執(zhí)行鼠標事件的代碼塊。在執(zhí)行鼠標事件的代碼塊時for循環(huán)已經(jīng)走完了，此時 i== ttd.length,鼠標點擊事件里的 ttd[i] 是拿不到的

反對回復 2017-04-27