让我们先来假设页面上有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的话，就是指向事件被触发的目标元素，这个是浏览器传给你了，所以一定正确

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

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"; } }

翻译一遍运行过程：

1. 获取所有tr元素

2. 遍历所有tr元素给他们绑定两个事件

3. 循环结束，此时i值为tr.length

4. 当移入某一个时，触发事件，去寻找tr[tr.length],得到的是undefined

5. 当undefined.style时报错

这个问题是闭包变量引用的问题， @UKer 已经回答得很清楚了。解决办法你已经给了一个，用this。我再给你一个不用this的解决办法吧

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

函数里的tr[i]是运行时计算的，当循环执行完，这时i就等于tr.length了，再执行绑定的函数，那函数里的tr[i]其实等于tr[tr.length]，自然就报错了。解决办法可以使用闭包。

楼上正解，等同于tr.length

即便已经采纳答案感觉你还是没GET到点上。这个问题的关键是闭包。
看一下ES6的let。

举例：

你比较一下let和var来定义for中变量的不同。鼠标滑过前三个色块，看浏览器调试窗口的输出。再滑过后三个色块看看输出什么。