루프의 addEventHandler()에 예기치 않은 결과가 있습니다.

Question

무엇을 검색해야할지 모르겠으므로이 주제에 대한 이전 질문을 찾을 수 없었습니다. Google도별로 도움이되지 않았습니다.

(function() { 
    var element = function(str) { 
     return document.getElementById(str); 
     }, 

     parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'), 
     len = parent.length, 

     slides = slides || []; 

    for (var i=0; i<len; i++) { 
     var link = parent[i].getElementsByTagName('a')[0], 
      slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1)); 


     if (addEventListener) { 
      link.addEventListener('click', function(event){ 
       event.preventDefault(); 
       alert(slide.getAttribute('id')); 
      }); 
     } else if (attachEvent) { 

     } 
    } 

})(); 

그래서, 위의 코드에서, 내 루프, 나는 (단지 디버깅을 위해 그들이 가리키는있는 슬라이드의 ID를 경고해야 모든 링크 (그 중 다섯)에 이벤트를 첨부), 그러나 그들은 모두 마지막 슬라이드의 ID를 보여줍니다. 나는 그것을 볼 수있는 jsFiddle을 만들었습니다 ... 행동.

나는 비교적 단순한 것을 엉망으로 만들고 있다고 가정하고 있습니다. 나는 무엇을 알아 내지 못합니다.

Answer 1

자바 스크립트의 변수는 블록 안에 선언 할 때도 함수 범위입니다. 이 루프는 변수 루프 주변에 클로저를 작성하지만 모든 반복에서 루프가 재 지정됩니다. 루프가 완료 될 때까지 모든 클로저가 배열의 마지막 요소를 가리 킵니다.

는이 문제를 해결하려면, 변수 다르게 범위 : 전에이 버그를 encoutered 한

(function() { 
    var element = function(str) { 
     return document.getElementById(str); 
     }, 

     parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'), 
     len = parent.length; 

    for (var i=0; i<len; i++) { 
     var link = parent[i].getElementsByTagName('a')[0], 
      slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1)); 


     if (addEventListener) { 
      link.addEventListener('click', (function(slide){ 
       return function(event) { 
        event.preventDefault(); 
        alert(slide.getAttribute('id')) 
       } 
      })(slide)); 
     } else if (attachEvent) { 

     } 
    } 

})(); 

Answer 2

은, 그것은 설명하기 매우 어려운 slide, 결합과 관련이 있습니다. 다음은 수정 사항입니다.

link.addEventListener('click', 
    (function(x) { 
     return function(event){ 
       event.preventDefault(); 
       alert(x.getAttribute('id')); 
       } 
    })(slide));