关于背景变色为什么第一种方法不行？

Question

//这是第一种方法，效果只是最后一行变色，并且鼠标不是移入最后一行而是前几行也只是最后一行变色   
    
         var trs = document.getElementsByTagName("tr");
        
	 for(var i=1;i<trs.length;i++){			
            var ntr = trs[i];			
    	    ntr.onmouseover=function(){ ntr.style.backgroundColor="#f2f2f2";}
    	    ntr.onmouseout=function(){ ntr.style.backgroundColor="#FFF";}
         }
         
//这是我后来有效的方法  
       
         var trs = document.getElementsByTagName("tr");  
               
    	 for(var i=1;i<trs.length;i++){			
           onevents(trs[i]);		
    	}
        function onevents(ntr){
    	 ntr.onmouseover=function(){ ntr.style.backgroundColor="red";}
    	 ntr.onmouseout=function(){ ntr.style.backgroundColor="#FFF";}         
        }

我想请问，为什么我直接在循环里面给每个元素绑事件不行？？而是要通过函数调用的方法才行？？

Answer 1

第一种方法，直接循环里使用onmouseover和onmouseout里面的ntr是一个定值；这是一个异步加载过程，即浏览器在加载完毕时for循环已经结束，当触发鼠标移入移出事件时，i就是个定值，所以ntr也是个定值；第二种方法，用了参数来保存当浏览器加载时for循环时候的i的值，即每一个i值都被保存下来并作为参数传给函数；浏览器加载完毕后，for循环里面的值其实如下：onevents(trs[0]);  //i为0时 onevents(trs[1]);  //i为1时 //... onevents(trs[trs.length-1])  //i为trs.length-1时 //每一个i都作为参数传递出去因此触发的时候每一行变色

Answer 2

学习了

Answer 3

上面的人都讲的挺好，但是不够透彻。要理解这个你要理解es5以及之前的js都没有块级作用域。所以浏览器加载完后，不管你如何操作，i都是 trs.length的值。如果使用let，就不会出现这个问题。

Answer 4

你的循环中没有一个判断条件啊，  每次调用了这个for循环,都是把循环全部循环了一遍，所以不管鼠标放在哪一行 都是最后一行变色