javascript使用for循环批量注册的事件不能正确获取索引值的解决方法

Posted 2020-08-16

今天遇到一个问题，那就是当使用for循环批量注册事件处理函数，然后最后通过事件处理函数获取当前元素的索引值的时候会失败，先看一段代码实例:

<script type="text/javascript">
window.onload=function(){
  var oLis=document.getElementsByTagName("li");
  var oshow=document.getElementById("show");
  for(var index=0;index<oLis.length;index++){//oLis.length=5
    oLis[index].onclick=function(){
      oshow.innerhtml=index;
    }
  }
}
</script>

分析:在上面的代码中，当点击li元素的时候弹出值始终是四，我们本来的想法是，点击li元素在div中显示当前li元素的索引值，但是，当for循环执行完毕以后，index的值已经变为四，于是也就出现了只显示4的现象。

解决方法：

（1）将当前的i只保存在一个数组中，这样就能在事件中获取准确的索引值。

<script type="text/javascript">
window.onload=function(){
  var oLis=document.getElementsByTagName("li");
  var oshow=document.getElementById("show");
  for(var index=0;index<oLis.length;index++){
    oLis[index]._index=index;
    oLis[index].onclick=function(){
      oshow.innerHTML=this._index;
    }
  }
}
</script>

（2）采用闭包的方法

<script type="text/javascript">
window.onload=function(){
  var oLis=document.getElementsByTagName("li");
  var oshow=document.getElementById("show");
  for(var index=0;index<oLis.length;index++){
    (function(index){
      oLis[index].onclick=function(){
        oshow.innerHTML=index;
      }
    })(index)
  }
}
</script>