JS中for循环中绑定事件(trs[i]不能与this替换)

对于该问题,我认为理清楚代码的执行流程就清楚了!

案例: 

需求: 当鼠标移动到表格中的每一行时,行的背景颜色发生变化;移出时,恢复原状.

js中的部分代码如下:

var trs = document.getElementsByTagName("tr");//(1)获取所有的行对象,并存入数组.
//移动鼠标,表格行有颜色变化
for (var i = 0; i < trs.length; i++) {//(2)遍历,获取每一个元素对象
    //移动到元素对象
    trs[i].onmouseover = function () {//(3)为每一个元素对象绑定onmouseover事件,注意只是绑定,并未执行
        this.className = "over";//(4)触发事件,执行监视器(代码),此外的this代表了调用方法的元素对象
    }
    //移出元素对象
    trs[i].onmouseout = function () {
        this.className = "out";
    }
}

问题: this不能换为trs[i]

明白了执行流程,也就清楚了:

执行流程:

for循环先执行,为每一个元素对象绑定事件;//每个元素绑定了事件,并未执行

for循环结束后,i的值变为length;//所以this不能替换为trs[i],此时的trs[i]为trs[length],不存在,undefined

触发事件,执行方法体.//因为此时的元素对象才都绑定了事件,所以可以执行.