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

本文介绍了一个使用JavaScript实现的鼠标移动效果案例:当鼠标移动到表格的每一行时,该行背景颜色会发生变化;当鼠标移出时,背景颜色恢复原状。通过分析代码执行流程,解释了为什么在事件绑定中不能将this直接替换为trs[i]。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

案例: 

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

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

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值