改变颜色为什么需要另设一个函数

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

为什么上面这种方法不行，一定要用下面的方法呢？

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