함수로 동적으로 자바 스크립트 이벤트 핸들러를 정의하는 방법

Question

저는 자바 스크립트에 다소 익숙하며 제 기능으로 어떤 일이 벌어지고 있는지 정확히 알 수는 없습니다.

배경 : 내 스크립트는 요소에 "toggler"또는 "toggled"클래스를 할당하여 자동으로 링크하도록 설정되어 있으므로 토글 러를 선택/선택 취소하면 토글 됨이 표시/숨길 것입니다. 이 작업을 수행 할 수있는 라이브러리가 많이 있지만이 경우에는 사용할 수 없습니다.)

스크립트는 pageload에서 실행되고 "toggler"클래스가있는 요소를 검색 한 다음 그에 따라 onclick 처리기를 할당합니다.

function makeToggle() { 
    for (i=0;i<toggler.length;i++) { 
     toggler[i].onclick=function(){toggleSection(this,i)}; 
    } 
    } 

    function toggleSection(obj,index) { 
    if (obj.checked==true) { 
     toggled[index].style.display="inline-block"; 
    } else { 
     toggled[index].style.display="none"; 
    } 
    } 

"이것은" "인덱스"항상 대신 toggler 배열의 길이로 설정되어 제대로 전달하고에 적용된 어떤 체크 박스로 확인되지만 다음은 코드 내가 함께 문제가 발생의 비트입니다 증분되고있다. 예를 들어, 제 1 및 제 2 togglers '온 클릭은 다음과 같아야합니다

이

onclick="toggleSection(this,0)" 
onclick="toggleSection(this,1)" 

그들은 실제로 (I 5 개 요소가 toggler로 정의 가정)에 설정되어 무엇입니까 : 나는 무엇에서

onclick="toggleSection(this,5)" 
onclick="toggleSection(this,5)" 

' 읽어 보았습니다. 범위가 문제이거나 기능이라고 부르는 방식이라고 생각합니다.하지만 아무 것도 발견하지 못했습니다.

Answer 1

당신은,

이 같은 시도, 당신의 onclick 기능에 paramater 등의 변수 ( 내가)를 통과해야 this blog post에 자세히 설명 된 문제를 확인하십시오.

이 이유는 상당히 복잡합니다. 이벤트 처리기로 정의한 익명 함수는 for 루프가 아닌 attachEventsToListItems의 범위에서 변수 i를 상속합니다. 그러나 이벤트 처리기가 실행될 때 for 루프는 반복을 완료하고이 함수의 i 값은 4가됩니다. 여기서 문제는 이벤트 처리기로 정의한 함수가 새 범위를 만들지 않는다는 것입니다 그들이 처형 될 때까지.

for (i=0;i<toggler.length;i++) { 
    toggler[i].onclick= (function (index) { 
     return function() { 
      toggleSection(this,index); 
     }; 
    }) (i); 
} 

당신은 여기에 배우에서 볼 수 있습니다 :

이 문제를 해결하려면, 당신은 폐쇄를 필요 http://jsfiddle.net/Vb2t2/

Answer 2

해당 변수를 사용할 수 없습니다. 은 함수를 만드는 동안과 비슷합니다. . 그렇게하면 의 값은이고, 마지막 값은 입니다.이됩니다. 귀하의 문제에서 나는 항상 toggler의 길이가됩니다.

그래서 당신은

function makeToggle() { 
    for (i=0;i<toggler.length;i++) { 
     toggler[i].addEventListener("click", (function(d) { return function(){ 
        toggleSection(this,d); 
     }; })(i), true); 
    } 
} 

또는 스타일

,

function makeToggle() { 
    for (i=0;i<toggler.length;i++) { 
     toggler[i].onclick = (function(d) { return function(){toggleSection(this,d)}})(i); 
    } 
}