.over{
    Background:red;
}
.out{
    Background:white;
}

var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
    trs[i].onmouseover= function(){
        this.className="over";
    };
   trs[i].onmouseout= function(){
        this.className="out";
    }
}

其實for迴圈的過程中對於每個trs[i] 所執行的動作是 繫結onmouseover  和 onmouseout兩個事件,不會去執行 function(){} , 一直到執行整個for迴圈, 所以在記憶體中的i的大小已經等於length

因為每行都綁定了兩個事件屬性, 所以當滑鼠觸發某一行時,會發生這樣的事情:

this指向的觸發事件的行本身,function執行

注意:如果寫的不是this而是trs[i],則結果是undefined ,因為觸發了事件function首先會去找i變數,但是此時記憶體中的i是length, 所以這裡要寫this.

對於繫結事件和執行方法的流程,可以通過下面這個例子來看:

function test() {
    var temp = 10;
    for (var i = 0; i < 5; i++) {
        document.getElementById

點選後會發現彈出的temp值為20, 而不是10, 這就證明了 for迴圈中只是執行了繫結事件的動作, 當我們觸發點選事件後, 此時temp的值其實已經是20了.(這個例子是看其他博主的)