addEventListener 使用 for 循环给了我一个未定义的结果 [英] addEventListener using for loop gives me an undefined result

问题描述

为什么这段代码给了我未定义的结果?我已经在网络浏览器中进行了测试.它告诉我 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

<div class="showDiv">显示数据:</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>

解决方案

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

for(var i=0,len=li.length; i

理解 for 循环

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

var len = 2;for(var i=0; i

(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>

解决方案

This is because, i is a variable defined outside your event handler function, which is incremented by each iteration. So when you finish the iterations of the for loop, the value of i is equal tolen, which causes li[i] to be undefined. And if you ask me why it's value is not considered during the iteration, it's because your event handler function is only executed when the event occurs (not when you are setting the event handlers by for loop). So you can make a variable inside the function scope which won't be changed by iteration. Better use this from inside the event handler to get the same thing.

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);
} 

Understanding the for loop

Why the value of i is equal to len after for loop is finished? Let's have a simpler example to make you understand the situation.

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

Lets's go through the iterations.

1. i = 0, matches the condition i<len, which proceeds with executing the code block and executes i++ after that, which makes i=1;
2. i = 1 now, matches the condition i<len, which proceeds with executing the code block and executes i++ after that, which makes i=2;
3. i = 2 now, fails to match the condition i<len and stops the iteration.

So, you have set the i=2 before you go to step 3. So your final console.log after for loop will say, after for loop: i = 2

这篇关于addEventListener 使用 for 循环给了我一个未定义的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！