                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

關(guān)于this問題

?window.onload = function(){? ? ? ? ? ? ? ? ??

? ? ?// 鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。

? ? ?var hh=document.getElementsByTagName("tr");

? ? ?for(var i=0;i<hh.length;i++)

? ? ?{ ??

? ? ? ? hh[i].onmouseover=function(){?

? ? ? ? ? ? ?this.style.backgroundColor= "#f2f2f2";

? ? ? ? }

? ? ? ? ?hh[i].onmouseout=function(){?

? ? ? ? ? ?this.style.backgroundColor= "#fff";

? ? ? ? }? ? ? } ?}

為什么這段代碼里，改背景色時用this就成功了，可是用??hh[i]不行？

PDD一枚

2015-11-24

源自：JavaScript進(jìn)階篇 9-22

關(guān)注問題我要回答

796

操作

收起

3 回答

慕男嬸回答被采納 +3 積分
2015-11-24

這個問題，如果你js基礎(chǔ)不好或剛?cè)腴T的話，給你解釋估計你也會難于理解。。我試著解釋一下吧，理解了更好，不理解你再問我。。

window.onload?=?function(){??????????????????
?????//?鼠標(biāo)移動改變背景,可以通過給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來改變所在行背景色。
?????var?hh=document.getElementsByTagName("tr");
?????for(var?i=0;i<hh.length;i++)
?????{???
????????hh[i].onmouseover=function(){?
?????????????this.style.backgroundColor=?"#f2f2f2";
????????}
?????????hh[i].onmouseout=function(){?
???????????this.style.backgroundColor=?"#fff";
????????}??????
??????}??
}

這幾段代碼的意思是，在頁面加載完畢之后，選出來所有的tr元素，由于所有的tr元素是放在一個nodeList里（你可以認(rèn)為是一個數(shù)組），所以可以循環(huán)它，來給每個tr綁定mouseover和mouseout事件。。

這些你肯定都理解。。

那為什么使用hh[i]就不行，使用this就可以了呢？

因為，循環(huán)執(zhí)行的很快，一瞬間就執(zhí)行完畢了，所以當(dāng)你觸發(fā)mouseover和mouseout事件時，循環(huán)早就執(zhí)行完畢了，執(zhí)行完畢時，此時 i = hh.length，所以，你使用 hh[i] 也就是 hh[hh.length] 并不能取出任何元素（返回undefined），那么你要實現(xiàn)的目標(biāo)“給每個tr綁定mouseover和mouseout事件”顯然是實現(xiàn)不了的。。

但是為什么this就可以了呢？因為不論如何，事件處理函數(shù)中的this對象始終指向每一個tr，所以它就可以。。

?