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

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循环,都是把循环全部循环了一遍，所以不管鼠标放在哪一行 都是最后一行变色