问答详情
源自：9-22 编程练习

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

第一段：

 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 11:42

个回答

  • 慕圣7096405
    2018-07-04 17:04:10
    已采纳

    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]将会丢失，因此无法对它绑定鼠标移上事件和鼠标移开事件，导致未出现变色效果。不知道这样解释你能否懂，如果还有疑惑，建议去翻译作用域的相关资料。

    1
  • 慕粉0913873
    2018-07-03 10:56:01

    因为第一个事件是在循环里边   而第二个是在循环外     所第二个事件没有为每一行都添加上

    0