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

为什么一定要改成this?为什么别人的代码没用this也能出效果?

我的: window.onload = function(){
         
             changecolor();
          }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
             function changecolor(){
          var cc=document.getElementsByTagName("tr");
              
          for(var i=0;i<cc.length;i++)
          {
          cc[i].onmouseover=function(){
               cc[i].style.backgroundColor="#f2f2f2";
              
          }    
          
           cc[i].onmouseout=function(){    
              cc[i].style.backgroundColor="#fff";
          
          }  
        
          }
    
     }
把cc[i]改成this就可以了,这是为什么呢?

别人的: window.onload = function(){
          var tr=document.getElementsByTagName("tr");
          for(var i= 0;i<tr.length;i++)
          {
              bgcChange(tr[i]);
          }
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
      }         
     function bgcChange(obj)
     {
        obj.onmouseover=function(){
            obj.style.backgroundColor="#f2f2f2";
        }
        obj.onmouseout=function(){
            obj.style.backgroundColor="#fff";
        }
     }

不懂这些区别在哪里?

提问者:Sixteen_mm 2016-04-02 14:22

个回答

  • 枫晔
    2016-04-21 14:38:45

    this代表当前作用域,,而tr[i],当鼠标放到某一行 应该没有办法自动识别出i=? 

  • 慕斯6941745
    2016-04-07 22:27:09

        我们可以看看整个函数执行的过程。

        首先i=0,同时为 tr[0]绑定事件onmouse,接着i=1,i=2,当i=3的时候,由于i<tr.length(tr.length=3);所以跳出了循环。

        这时候i=3,并且保存到了内存当中。

        于此同时,tr[i].onmouseover/tr[i].onmouseout这两个事件是没有执行的,而for循环已经结束了。

        i在内存保存=3;当鼠标经过触发事件的时候,执行函数cc[i].style.backgroundColor="#f2f2f2";/  cc[i].style.backgroundColor="#fff";,由于cc[3]这个节点是不存在的,所以控制台报错 can not ......。

        

  • 晴语欢
    2016-04-05 16:48:24

    都表示上下文环境