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++) {   

    tr[i].onmouseover = function on_tr_over() {

        tr[i].style.backgroundColor="#f2f2f2";

    };

}

// 因为你页面上的鼠标事件触发是在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的话，就是指向事件被触发的目标元素，这个是浏览器传给你了，所以一定正确

哈哈，这是形象的理解，希望对你有帮助。