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

来源:9-22 编程练习

Sixteen_mm

2016-04-02 14:22

我的: 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";
        }
     }

不懂这些区别在哪里?

写回答 关注

3回答

  • 枫晔
    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

    都表示上下文环境

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468195 学习 · 21891 问题

查看课程

相似问题