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

JavaScript closure function passing to event listener

本文关键字：事件 监听器 闭包 函数 JavaScript      更新时间：2023-09-26

抱歉，如果标题不完全准确，不知道如何描述它。我有这一点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);
  }
}

你可以在这里看到这段代码的工作(以及在完整的上下文中)。

我在这里试图理解的部分涉及闭包函数和事件侦听器。所以闭包函数被调用，并且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变量传递，然后在click回调中作为closure捕获。

相关文章：