为什么在addEventListener的函数中未定义？

Question

我正在尝试向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,因此超出了数组的范围.

它可以通过使用保持变量范围的块来修复,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)
}