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

Question

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

发生这种情况是因为范围。在EventListener里面，你有一个匿名函数，正因为如此，你已经不在li的范围内了。但是，您可以使用 this 关键字来引用它。请参阅我已在您的代码中替换的警报。

(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){ // you are now inside a different function block here.
             e.preventDefault();
             alert(this.innerHTML);
             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 2

这是因为，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 循环

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

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

让我们完成迭代。

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

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

Answer 3

您需要参考要附加事件的特定 li

(function(){
      var innerDiv = document.getElementsByClassName('showDiv')[0];
       var li = document.getElementsByTagName('li'); 
          for(var i=0,len=li.length;i<len;i++){
           var thisLi = li[i];
           thisLi.addEventListener('click',function(e){
                 e.preventDefault();
                 alert(thisLi.innerHTML);
                 var data = thisLi.getAttribute('data-info');
                 innerDiv.innerHTML = data;
           },false);
      } 
    }());

当 click 将被执行时 i 的值为 3（在您的情况下），因此 li[i] 将有所不同。您可以检查 THIS 的控制台以检查 click 事件

上 i 的值

Answer 4

除了其他张贴者的答案之外，另一种方法是使用 function 的本地范围。 In JavaScript function 是创建新范围的最可靠方法。以上面的例子为例，

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

我创建了一个新的范围，它将隔离变量 i 的值。如果您使用的是 ES6，则可以使用 let 关键字来做同样的事情。您所要做的就是将 var 替换为 let。您还可以在 for 循环中使用 let，这将为您提供 for 循环本地的全新范围。

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

addEventListener using for loop gives me an undefined result

javascript

for-loop

undefined

了解 for 循环