javascript - 为什么addEventListener函数中未定义？

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 8 年前。

我正在尝试添加 mouseenter元素的事件监听器以更改其子节点的不透明度。我用for添加监听器，并且可以正确输出子节点，但在函数中它是“未定义”的。我不知道为什么。

HTML:

<article class="index-image-article rel">
    <section class="index-image-info">
        // some elements
     </section>
     <div class="index-image-excerpt mask table">
         // some elements
     </div>
</article>

Javascript:

var indexImageArticle = document.querySelectorAll(".index-image-article");
var indexImageInfo = document.querySelectorAll(".index-image-info");
var indexImageExcerpt = document.querySelectorAll(".index-image-excerpt");

for(var i = 0; i < indexImageArticle.length; i++) {
    console.log(indexImageInfo[i]); // output properly
    indexImageArticle[i].addEventListener("mouseenter", function() {
        indexImageInfo[i].style.opacity = 1;
        indexImageExcerpt[i].style.opacity = 0;
    });
}

console.log的输出是:

<section class=​"index-image-info">​…​</section>​
<section class=​"index-image-info">​…​</section>​
<section class=​"index-image-info">​…​</section>​
<section class=​"index-image-info">​…​</section>

和错误:

Uncaught TypeError: Cannot read property 'style' of undefined(anonymous function)

​undefined指向indexImageInfo[i]

Answer 1

这是 JavaScript 中变量作用域规则的奇怪细微差别之一。

实际上，这可以归结为一件事，在添加事件处理程序时，i 具有正确的值。在执行时，事件处理程序i已递增到indexImageArticle.length，因此超出了数组的范围。

它可以通过使用一个维护变量范围的 block 来修复，a IIFE是一种方法:

for(var i = 0; i < indexImageArticle.length; i++) {
    console.log(indexImageInfo[i]); // output properly
    (function(x){
        indexImageArticle[x].addEventListener("mouseenter", function() {
            indexImageInfo[x].style.opacity = 1;
            indexImageExcerpt[x].style.opacity = 0;
        });
    })(i)
}