动态添加javascript eventlistener做无法解释的事情

目前正在编写一段代码，该代码旨在以动态方式将EventListener添加到页面上的图像中

var images = document.getElementsByClassName("imageBox");

function imageZoomer(imageName) {
    console.log(imageName);
}

for(var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", function(){imageZoomer(i)}, false);
}

var images=document.getElementsByClassName（“imageBox”）；
函数imageZoomer（imageName）{
console.log（imageName）；
}
对于（var i=0；i

---

然而，i显示的值与我预期的不同。起初一切都很顺利。它会像预期的那样迭代。但是在我的测试页面上有两张图片，控制台日志在两张图片上都显示了“2”

发生这种情况是因为

i

不断增加，当您单击图像时

i

可能是

images.length-1

。您需要一种在每个处理程序中保存当前

i

的方法。您可以将该值存储在每个图像上（

images[i].index=i；

通常有效）并在以后检索它，但查找对象是一件痛苦的事情-它最终会像：

images[i].index = i;
images[i].addEventListener("click", function(e){imageZoomer(e.target.index)}, false);

images[i].addEventListener("click", (function(i){return function(){imageZoomer(i)}})(i))

然而，我发现最巧妙的方法是使用IIFE（读：iffy-立即调用的函数表达式）将

I

的范围限制在创建事件时的任何范围内。这看起来像：

images[i].index = i;
images[i].addEventListener("click", function(e){imageZoomer(e.target.index)}, false);

images[i].addEventListener("click", (function(i){return function(){imageZoomer(i)}})(i))

---

iIFE超级强大。请看本·阿尔曼的帖子：

查看链接的副本。同时，一个提示：

i

在一个地方声明，在单击时调用的函数之外。和.Damn。应该再找一点。我很抱歉。到处重复…”单击图像时，

i

可能是

images.length-1

“-不，它将是

images.length

。不管怎样，当上面已经有三个重复的问题时，你真的认为一个新的答案是必要的吗？