Функция закрытия JavaScript, проходящая к слушателю событий

Question

Извините, если заголовок не совсем точный, не знаете, как его описать. У меня есть этот бит 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); 
    } 
} 

Вы можете увидеть этот код работает (и в полном контексте) here.

Часть, которую я пытаюсь понять, включает функцию закрытия и прослушиватель событий. Таким образом, функция закрытия вызывается, а i (счетчик для цикла) передается как аргумент index. Мой вопрос в том, как heck i устанавливается на индекс изображения, который был нажат?

Answer 1

Если мы посмотрим на этот фрагмент кода:

(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 внутри click обратного вызова.