关于闭包的问题

Question

看了一些视屏教程。跟着视屏写了一段代码。想要实现的功能如下：
var img=document.getElementsTagName("img");    //图片元素List列表
var li=document.getElementsTagName("li");    //Li元素List列表
for(var i=0; i<img.length;i++){
      li[i].onmouseover=function (){    //想要给Li元素邦定onmouseover事件
          img[i].top=10px;        // 但这时的img中的i变量却是img.length值。我想问的是，这里不是跟着for循环的吗。也就是说，li[i]中的i是多少，img[i]中的i也要多少才对呀。如果不是？请问如何解释这种情况。我的目标是做个图片滚动
     }
}

Answer 1

var img=document.getElementsTagName("img"); //图片元素List列表
var li=document.getElementsTagName("li"); //Li元素List列表
for(var i=0; i<img.length;i++){
  li[i].onmouseover= function (){ //想要给Li元素邦定onmouseover事件
     this.top=10px;
  }
}

Answer 2

也可以这样var img=document.getElementsTagName("img"); //图片元素List列表
var li=document.getElementsTagName("li"); //Li元素List列表
for(var i=0; i<img.length;i++){
  var index = i;
  li[index].onmouseover=function (){ 
      img[index].top=10px; // 用index
  }
}

Answer 3

function adDiv(){
var button=getTag($("button"),"li");
for(var i=0;i<button.length ;i++){
var fame=getTag($("fame"),"a");
var index=i;
button[i].onmouseover=function (){
alert(index);这里的index还是不跟i同步值呀。
}
}
}

Answer 4

我帮你总结下吧。
var img=document.getElementsTagName("img"); //图片元素List列表
var li=document.getElementsTagName("li"); //Li元素List列表
for(var i=0; i<img.length;i++){
  li[i].onmouseover=function (){ //想要给Li元素邦定onmouseover事件
  img[i].top=10px; // 但这时的img中的i变量却是img.length值。我想问的是，这里不是跟着for循环的吗。也就是说，li[i]中的i是多少，img[i]中的i也要多少才对呀。如果不是？请问如何解释这种情况。我的目标是做个图片滚动
  }
}
这点为什么不可以，因为onmouseover事件函数在闭包里面，这里面使用到了一个“全局变量i”,对于这个事件的函数来说i是一个全局变量，并且在执行完for语句后i不会被释放。所以不管是鼠标移到那个图片，实际控制的是最后一张图片。这就不是我们想要的结果。
var img=document.getElementsTagName("img"); //图片元素List列表
var li=document.getElementsTagName("li"); //Li元素List列表
for(var i=0; i<img.length;i++){
  li[i].onmouseover= function (){ //想要给Li元素邦定onmouseover事件
  this.top=10px;
  }
}上面这个代码为什么可以达到我们要的效果，是因为事件函数里面没有用到“全局的变量”，而是用this,这里的this,会根据当前触发事件的元素而发生变化，img[0]的时候，this就是img[0],以此类推。所以img[n]之间事件函数互不影响。
var img=document.getElementsTagName("img"); //图片元素List列表
var li=document.getElementsTagName("li"); //Li元素List列表
for(var i=0; i<img.length;i++){
  var index = i;
  li[index].onmouseover=function (){ 
      img[index].top=10px; // 用index
  }
}
上面这个代码为什么也可以达到我们要的目的，是因为有个局部变量index,这个局部变量也是在整个函数执行完后不会被释放掉，因为也在闭包里面。但是他跟i不一样之处在于，他在每次执行for语句的时候都是一个新的变量，所以通过这个局部变量也可以把它们区分开来，使到img[n]之间的事件函数互不影响。