addEventListener에 이벤트를 전달할 수 없습니다. closure issue

Question

이것은 나를 미치게합니다. SVG 객체에 이벤트 리스너를 추가하는 루프가 있습니다. 객체는 인수를 위해 작은 원이며 10 개의 원마다 마우스 오버 및 마우스 아웃 이벤트를 추가해야합니다.

첫 번째 문제점은 표준 클로저 스코프입니다. 모든 리스너가 동일한 루프에 추가되었으므로 모두 동일한 루프 변수의 잘못된 값을 보게됩니다. 이 문제를 해결할 수는 있지만 두 번째 문제는 청취자에게 '이벤트'를 전달해야한다는 것입니다.이 두 가지 문제를 동시에 해결할 방법을 찾을 수 없습니다.

나는이의 다양한 버전을 시도했다 :

for(month = 0; month < nMonths; month++) { 
    ... 
    shape.addEventListener(
    "mouseover", 
    (function(event, index) { popup_on(event, foo, index); })(event, month), 
    false); 
    group.appendChild(shape); 
} 

이 특정 버전 '이벤트가 정의되지 않은'날 수 있습니다. popup_on은 실제 처리기이며 event과 month의 현재 값을 가져야합니다. 내가 어떻게이 일을해야하는지 어떤 생각? 감사.

Answer 1

이벤트는 으로 자동 전달됩니다.- addEventListener에 전달하는 함수의 첫 번째 인수가됩니다. 또한 false는 캡처 매개 변수의 기본값입니다. 또한

(function() { 
    var i = month; 
    shape.addEventListener("mouseover", function(e) { popup_on(e, foo, i); }); 
})(); 

, 당신은 당신의 이벤트 콜백을 통해 폐쇄 foo와 괜찮아? 그렇지 않으면, 당신은 그것을

(function() { 
    var i = month; 
    var f = foo; 
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); }); 
})(); 

과 같은 일을 할 수있는 그리고 모든 지역 변수가 짜증나지고, 당신은 그들에게 가능하게 될

(function(i, f) { 
    shape.addEventListener("mouseover", function(e) { popup_on(e, f, i); }); 
})(month, foo);