                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

關于this問題

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

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

? ? ?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進階篇 9-22

關注問題我要回答

788

操作

收起

3 回答

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

這個問題，如果你js基礎不好或剛入門的話，給你解釋估計你也會難于理解。。我試著解釋一下吧，理解了更好，不理解你再問我。。

window.onload?=?function(){??????????????????
?????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
?????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里（你可以認為是一個數組），所以可以循環它，來給每個tr綁定mouseover和mouseout事件。。

這些你肯定都理解。。

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

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

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