                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

这两段代码不一样吗？为什么第一段不能运行第二段却可以？

第一段：

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

var z = document.getElementsByTagName("tr");

for(var i=1;i<z.length;i++){

z[i].onmouseover = function(){ z[i].style.backgroundColor = "red"; }

z[i].onmouseout = function(){ z[i].style.backgroundColor="#fff"; }

}

第二段：

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

var z=document.getElementsByTagName("tr");

for(var i=1;i<z.length;i++){ ab(z[i]); }

function ab(n){

n.onmouseover=function(){n.style.backgroundColor="red";}

n.onmouseout=function(){ n.style.backgroundColor="#fff"; }

}

qq_星辰_89

2018-06-30

源自：JavaScript进阶篇 9-22

关注问题我要回答

1177

操作

收起

2 回答

慕圣7096405 回答被采纳 +2 积分
2018-07-04

var z = document.getElementsByTagName("tr");

for(var i=1;i<z.length;i++){

z[i].onmouseover = function(){ this.style.backgroundColor = "red"; }

z[i].onmouseout = function(){ this.style.backgroundColor="#fff"; }

}

将第一段代码改为上面这样就可以了。主要是TR对象z[i]作用域的问题，你的TR对象z[i]的作用域仅限于FOR循环体内，在回调函数function中TR对象z[i]将会丢失，因此无法对它绑定鼠标移上事件和鼠标移开事件，导致未出现变色效果。不知道这样解释你能否懂，如果还有疑惑，建议去翻译作用域的相关资料。