为什么for循环中直接使用tr[i]不可以

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

       }

}

这是别人的代码，但我的问题和他有点不一样，这是别人回答他：

这是由于事件的异步执行造成的。方法一中给每个tr都绑定了onmouseover和onmouseout事件，页面加载完成后，for循环中的i已经变为了tr.length。而事件此时还没有被触发，当用户移动鼠标触发事件时，事件函数中的代码  tr[i].style.backgroundColor = "#f2f2f2";开始执行，而这时i的值已经是tr.length了,tr[i]即tr[tr.length],可tr中最后一个是tr[tr.length-1],而tr[tr.length]这个节点是不存在的。

我的问题是：

就是for循环结束后，每个tr[i]的事件不是已经注册了吗？就是tr[0].style.backgroundColor = "#f2f2f2";这样每个tr[i]事件都注册了，那这时i怎么变不是应该没关系了吗，为什么鼠标移动的时候触发事件的时候还要在执行tr[i].style.backgroundColor = "#f2f2f2";这个啊，不是应该执行如tr[0].style.backgroundColor = "#f2f2f2";这样的，执行的是注册的事件吗？