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

關(guān)于this問(wèn)題

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

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

? ? ?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";

? ? ? ? }? ? ? } ?}

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

PDD一枚

2015-11-24

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

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

781

操作

收起

3 回答

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

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

window.onload?=?function(){??????????????????
?????//?鼠標(biāo)移動(dòng)改變背景,可以通過(guò)給每行綁定鼠標(biāo)移上事件和鼠標(biāo)移除事件來(lái)改變所在行背景色。
?????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";
????????}??????
??????}??
}

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

這些你肯定都理解。。

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

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

但是為什么this就可以了呢？因?yàn)椴徽撊绾危录幚砗瘮?shù)中的this對(duì)象始終指向每一個(gè)tr，所以它就可以。。

?