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

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

————————————————
版权声明：本文为CSDN博主「有备而来的小人物」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_17249543/article/details/81121523