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 : 여기에 코드의 관련 부분이다.

여기서 이해하려고하는 부분은 클로저 기능과 이벤트 리스너입니다. 따라서 closure 함수가 호출되고 i (for 루프의 카운터)이 index 인수로 전달됩니다. 내 질문은, 도대체가 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); 

코드의 반복을 다음 click 콜백 내부 closure으로 캡처됩니다 i 변수, 각 이미지 인덱스를 전달합니다.