javascript - 使用 for 循环的 addEventListener 给我一个未定义的结果

Question

为什么这段代码给我的结果是未定义的？ 我已经在网络浏览器中进行了测试。它告诉我 li[i] 是未定义的。我不知道为什么以及如何。 我知道关闭。也许它应该在我每次单击每个 li 元素时弹出字符串“dataToggle”；但是有人可以帮助我提供有关此特定问题的更多详细信息以及您认为对理解此问题很重要的是什么？ 谢谢

(function(){
  var innerDiv = document.getElementsByClassName('showDiv')[0];
  //var li = document.querySelectorAll('ul.idiv li'); 
var li = document.getElementsByTagName('li'); 

  for(var i=0,len=li.length; i<len; i++){
       li[i].addEventListener('click',function(e){
             e.preventDefault();
             alert(li[i]);
             var data = li[i].dataset.info;
             showDiv.innerHTML = data;
       },false);
    
  } 
}()); 

<div class="showDiv">Show data: </div>

<div class="outerDiv">
  <ul class="idiv">
     <li data-info="datashow"><a href="">111</a></li>
     <li data-info="dataHide"><a href="">222</a></li>
     <li data-info="dataToggle"><a href="">333</a></li>
  </ul> 
</div>

Answer 1

这是因为，i是在事件处理程序函数外部定义的变量，每次迭代都会递增。所以当你完成 for 的迭代时循环，i 的值等于len ，这导致 li[i]成为undefined .如果你问我为什么在迭代期间不考虑它的值，那是因为你的事件处理函数只在事件发生时执行(而不是在你通过 for 循环设置事件处理程序时)。所以你可以在函数范围内创建一个不会被迭代改变的变量。更好用this从事件处理程序内部得到同样的东西。

for(var i=0,len=li.length; i<len; i++){
   li[i].addEventListener('click',function(e){
         e.preventDefault();
         alert(this);
         var data = this.dataset.info;
         showDiv.innerHTML = data;
   },false);
} 

理解for循环

为什么值i等于len在 for 之后循环结束了吗？让我们举一个更简单的例子来让你了解情况。

var len = 2;
for(var i=0; i<len; i++; {
    //Do anything here
}
console.log("after for loop: i = " + i);

让我们来看看迭代。

1. i = 0 , 符合条件 i<len ，它继续执行代码块并执行 i++之后，这使得i=1 ;
2. i = 1现在，匹配条件 i<len ，它继续执行代码块并执行 i++之后，这使得i=2 ;
3. i = 2现在，无法匹配条件 i<len并停止迭代。

所以，你已经设置了i=2在你进入第 3 步之前。所以你的最终 console.log在 for 之后循环会说， after for loop: i = 2