帮忙看下这两种写法有啥区别啊。。为啥一个能实现，一个实现不了呢 0 0
来源：9-22 编程练习
qq___834
2018-07-24 01:43
window.onload = function(){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var trList = document.getElementsByTagName("tr");
for(var i = 0 ; i < trList.length ; i++){
var tr = trList[i];
tr.onmouseover = function(){
tr.style.backgroundColor = "red";
}
tr.onmouseout = function(){
tr.style.backgroundColor = "white";
}
}
}
window.onload = function(){
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var trList = document.getElementsByTagName("tr");
for(var i = 0 ; i < trList.length ; i++){
changeColor(trList[i]);
}
function changeColor(tr){
tr.onmouseover = function(){
tr.style.backgroundColor = "red";
}
tr.onmouseout = function(){
tr.style.backgroundColor = "white";
}
}
}
第一种方法只能是实现最后一行tr有效果，比如把鼠标放在第一行或者第二行，最后一行会变红色。
第二种方法可以正常实现。。
第一种方法哪里出了问题了吗0 0 感觉这俩方法是等价的呀
写回答
关注
2回答
-
- 昵称是四声
- 2018-08-10 18:16:03
js里的事件是异步的，而js异步的最大特点就是得等主线程跑完了才轮到事件的执行，而这时候i已经是最后一个了。解决办法是改为立即执行函数：
for(var i=1;i<tr.length;i++)
{ (function(i){
tr[i].onmouseover=function()
{
tr[i].style.backgroundColor="#f2f2f2";
}
tr[i].onmouseout=function()
{
tr[i].style.backgroundColor="#fff";
}
})(i)
}
-
- _蓝天白云______
- 2018-07-29 16:41:02
这个是闭包的问题。第一种你的确循环了，但是每一次循环并没有执行函数（事件的方法），只有你触发事件了才执行函数，所以你在执行事件之前，循环已结束，tr代表的是tr数组，i已经表示最后一行了，所以造成无论哪一行最后一行都生效的情况。
而第二种就不会出现闭包的问题了，因为你用执行函数把每一个i都调用出来了，所以情况正常。
看懂了吗
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468061 学习 · 21891 问题
相似问题