Js遍历元素并赋予事件绑定匿名函数时，为什么调试说未定义元素？

Question

表格鼠标悬停变色。
代码：

     var tr=document.getElementsByTagName('tr');     for (var i = 0; i < tr.length; i++) {         tr[i].onmouseover=function(){    
              tr[i].style.backgroundColor="#f2f2f2";
         }         tr[i].onmouseleave=function(){             tr[i].style.backgroundColor="#fff";
         }
     }

chrome说的是 Uncaught TypeError: Cannot read property 'style' of undefined at HTMLTableRowElement.tr.(anonymous function).onmouseover

但是把tr[i]改为this就可以:

         var tr=document.getElementsByTagName('tr');         for (var i = 0; i < tr.length; i++) {
             tr[i].onmouseover=function(){                 this.style.backgroundColor="#f2f2f2";
             }
             tr[i].onmouseleave=function(){                 this.style.backgroundColor="#fff";
             }
         }

Answer 1

让我们先来假设页面上有5个tr，这样子比较好说明：var tr=document.getElementsByTagName('tr');for (var i = 0; i < tr.length; i++) {&nbsp; &nbsp;&nbsp; &nbsp; tr[i].onmouseover = function on_tr_over() {&nbsp; &nbsp; &nbsp; &nbsp; tr[i].style.backgroundColor="#f2f2f2";&nbsp; &nbsp; };}// 因为你页面上的鼠标事件触发是在for循环之后的// 这时候i的赋值是tr.length，也就是i是5// 这5个tr分别是tr[0]到tr[4]，tr[5]是代表第6个tr元素了// 而实际上页面上没有第6个tr，所以就是undefined了// 当鼠标移到tr时，相当于执行下面的语句：tr[5].style.backgroundColor="#f2f2f2"; // 调了undefined的style属性，所以报错了哦而第二段代码传this的话，就是指向事件被触发的目标元素，这个是浏览器传给你了，所以一定正确哈哈，这是形象的理解，希望对你有帮助。