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

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

1 个答案: