传递给事件侦听器的JavaScript闭包函数

抱歉，如果标题不准确，不知道如何描述它。我用各种其他教程拼凑了一些js。它正在工作，但我希望对它的工作原理有更多的了解

代码用于一个充满图像的页面上的模式，在该页面上单击任何图像，它将启动一个包含该图像的模式。以下是守则的相关部分：

function modal(modalId, modalImg) {
  var image = document.getElementsByClassName('modalImg');
  var imageLength = image.length;
  var myModal = document.getElementById(modalId);
  var modalImg = document.getElementById(modalImg);
  for (var i = 0; i < imageLength; i++) {
    (function(index) {
      image[i].onclick = function() {
        myModal.style.display = "block";
        modalImg.src = this.src;
        imgIndex = index;
      }
    })(i);
  }
}

功能模态（modalId，modalImg）{
var image=document.getElementsByClassName（'modalImg'）；
var imageLength=image.length；
var myModal=document.getElementById（modalId）；
var modalImg=document.getElementById（modalImg）；
对于（变量i=0；i

您可以看到这段代码正在工作（并且在完整的上下文中）

---

我在这里试图理解的部分涉及闭包函数和事件侦听器。因此正在调用闭包函数，

i

（for循环的计数器）作为

index

参数传递。我的问题是，

i

是如何设置为单击的图像的索引的？

如果我们查看此代码段：

(function(index) {
  image[i].onclick = function() {
    myModal.style.display = "block";
    modalImg.src = this.src;

    // `index` here is a variable accessible through closure scope
    imgIndex = index;
  }
})(i);

---

代码迭代所有图像，并将每个图像索引作为

i

变量传递，然后在

单击
回调中捕获为
closure
。
如果我们查看此代码片段：

(function(index) {
  image[i].onclick = function() {
    myModal.style.display = "block";
    modalImg.src = this.src;

    // `index` here is a variable accessible through closure scope
    imgIndex = index;
  }
})(i);

代码迭代所有图像，并将每个图像索引作为
i
变量传递，然后将其捕获为
closure
内部
单击
回调。
我给出了答案。检查哪些内容不清楚，并在评论中提及。我会澄清的。闭包是为了避免这种情况，我给出了我的答案。检查哪些内容不清楚，并在评论中提及。我要澄清一下。闭包是用来避免这种情况的，好吧，如果我正确理解你的意思，italic_every_italic图像的索引将被传递到闭包函数中，然后.onclick捕获单个图像的适当索引，该索引将成为
this
？@Tyler，一条注释中的内容太多了<代码>（functoid（index）…（）
不是闭包函数，它是。
onclick
回调在闭包中捕获
索引
变量。在这个回调中，
这个
指向
DOM
element@Tyler，存在一个陷阱，请检查@Tyler:i
的值的作用域是外部的
modal
函数，因此如果不创建中间变量作用域，您创建的所有事件处理程序都将使用相同的变量，因此，所有人都将读取相同的值，而不是在循环中读取的值……除非您使用
let i
而不是
var i
，它现在通过将
i
范围限定到
for
循环的
主体来解决此问题。好的，如果我正确理解您的话，italic\u每个italic图像的索引都被传递到闭包函数中，然后.onclick捕获单个图像的适当索引，该索引将成为
this
？@Tyler，一条注释中的内容太多了<代码>（functoid（index）…（）
不是闭包函数，它是。
onclick
回调在闭包中捕获
索引
变量。在这个回调中，
这个
指向
DOM
element@Tyler，存在一个陷阱，请检查@Tyler:i
的值的作用域是外部的
modal
函数，因此如果不创建中间变量作用域，您创建的所有事件处理程序都将使用相同的变量，因此，它们都将读取相同的值，而不是在循环中读取的值……除非使用
let i
而不是
var i
，现在通过将
i
范围限定到
for
循环的
主体来解决此问题。