js 使用for 循环绑定onmouseover 事件出错

Question

         var tr = document.getElementsByTagName('tr');
            tr[0].onmouseover = function(){
              tr[0].style.backgroundColor = '#ccc'; 
            }
            tr[1].onmouseover = function(){
              tr[1].style.backgroundColor = '#ccc'; 
            }
            tr[2].onmouseover = function(){
              tr[2].style.backgroundColor = '#ccc'; 
            }

上面的语句可以正常执行，但是使用for循环的时候报错。循环方式如下：

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

求指点

Answer 1

因为onmouseover事件是在鼠标放上之后触发的,而此时for循环早已结束,所以无论谁触发的事件,i值永远固定不变.

Answer 2

这段代码是先执行循环，然后给每个tr添加一个onmouseover事件，但是事件里面的内容还读取不到。等循环完之后，这时i==4，然后你把鼠标挪进去，执行 tr[i].style.backgroundColor = '#ccc'; tr[4]为空，所以报错。

Answer 3

stackoverflow 上有人回答，贴出来。         var tr = document.getElementsByTagName('tr');             for(var i=0;i<tr.length;i++){               tr[i].onmouseover = function(){                 //tr[i].style.backgroundColor = '#ccc';  更改为下一句                 this.style.backgroundColor = '#ccc';               }                         }为什么使用this 还不是很清楚，在学习中。

Answer 4

少写了一个条件。如果里面有4个tr，循环完成之后，i==4。