?window.onload?=?function(){??
??????????????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。?????????
??????????????????????var?trList?=?document.getElementsByTagName("tr");
??????????????????????for(var?i?=?0?;?i?<?trList.length?;?i++){ ????
??????????????????????????var?tr?=?trList[i]; ????
??????????????????????????tr.onmouseover?=?function(){ ????????
??????????????????????????????tr.style.backgroundColor?=?"red"; ????
??????????????????????????} ????
??????????????????????????tr.onmouseout?=?function(){ ????????
??????????????????????????????tr.style.backgroundColor?=?"white"; ???
??????????????????????????}
??????????????????????} ???? ?
?}
?
?
??window.onload?=?function(){??
??????????????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。?????????
??????????????????????var?trList?=?document.getElementsByTagName("tr");
??????????????????????for(var?i?=?0?;?i?<?trList.length?;?i++){ ????
??????????????????????????changeColor(trList[i]);
??????????????????????}
?????????????????????? ?
??????????????????????function?changeColor(tr){ ????
??????????????????????????tr.onmouseover?=?function(){ ????????
??????????????????????????????tr.style.backgroundColor?=?"red"; ???
??????????????????????????} ????
??????????????????????????tr.onmouseout?=?function(){ ????????
??????????????????????????????tr.style.backgroundColor?=?"white"; ????
??????????????????????????}
??????????????????????}???? ?
?}
?
?第一種方法只能是實現最后一行tr有效果,比如把鼠標放在第一行或者第二行,最后一行會變紅色。
?第二種方法可以正常實現。。
?
?第一種方法哪里出了問題了嗎0?0?感覺這倆方法是等價的呀
2018-08-10
js里的事件是異步的,而js異步的最大特點就是得等主線程跑完了才輪到事件的執行,而這時候i已經是最后一個了。解決辦法是改為立即執行函數:
for(var i=1;i<tr.length;i++)
? ? ? ? ? { (function(i){?
? ? ? ? ? ? tr[i].onmouseover=function()
? ? ? ? ? ? {
? ? ? ? ? ? tr[i].style.backgroundColor="#f2f2f2";
? ? ? ? ? ? }
? ? ? ? ? ? tr[i].onmouseout=function()
? ? ? ? ? ? {
? ? ? ? ? ? tr[i].style.backgroundColor="#fff";
? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? })(i)
? ? ? ? ? }
2018-07-29
? 這個是閉包的問題。第一種你的確循環了,但是每一次循環并沒有執行函數(事件的方法),只有你觸發事件了才執行函數,所以你在執行事件之前,循環已結束,tr代表的是tr數組,i已經表示最后一行了,所以造成無論哪一行最后一行都生效的情況。
而第二種就不會出現閉包的問題了,因為你用執行函數把每一個i都調用出來了,所以情況正常。
看懂了嗎