AJAX addEventListener - 다른 함수에 매개 변수 전달

Question

이 내용을 짧게 유지하겠습니다. buttons의 목록이 있는데, 루프를 사용하여 만들고 그 중 하나가 클릭되면 해당 ID를 전달할 수 있기를 원합니다. 속성을 사용하여 새 페이지를 동적으로 생성합니다.

여기에 코드입니다 : 이제

for (var i in data.contacts) { 
    var temp = document.createElement('div'); 
    temp.className = "contacts"; 
    var dude = document.createElement('input'); 
    dude.type = "button"; 
    dude.value = data.contacts[i]; 
    dude.id = data.contacts[i]; 
    dude.className = "dude_button" + data.contacts[i]; 

    dude.addEventListener('click', function(event) { gotoProfile(dude.id); }, false); 


    temp.appendChild(dude); 
    temp.appendChild(document.createElement('br')); 
    theDiv.appendChild(temp); 

} 
// and now in another file, there's gotoProfile(): 

function gotoProfile(x) { 
var username = document.getElementById(x).value; 

if (xmlHttp) { 
    try { 
.... etc. 

이 종류의 작품 볼 수 있지만 문제는 내가 어떤 버튼을 클릭하면, 그것은 단지 목록 data.contacts에서 마지막 dude.id 값을 전달한다는 것입니다. 분명히 모든 버튼의 addEventListener은 단지 마지막 것 대신에 data.contacts[i] 값을 전달하기를 원합니다.

감사합니다. 감사합니다.

Answer 1

JavaScript에는 블록 범위가 없기 때문에 dude은 이벤트 처리기를 호출 할 때 마지막으로 할당 된 요소를 참조합니다 (루프가 완료 되었기 때문에). 예를 들어, dude에 대한 참조는 capture입니다. 직접 함수를 사용하십시오 :

dude.addEventListener('click', (function(d) { 
    return function(event) { 
     gotoProfile(d.id); 
    } 
}(dude)), false); 

이것은 루프에서 함수를 작성할 때 일반적으로 발생하는 오류입니다.

---

하지만 훨씬 쉽게 만들 수 있습니다. event 개체는 이벤트가 발생 된 요소를 가리키는 속성 인 target을가집니다. 그래서 당신은 다만 할 수 있습니다

dude.addEventListener('click', function(event) { 
    gotoProfile(event.target.id); 
}, false); 

그리고 그렇게 말

, 당신은 모든 버튼에 대한 핸들러를 추가 할 필요가 없습니다. 모든 버튼에 대해 동일한 작업을 수행 할 때 버튼 (또는 공통 조상)의 부모에게 동일한 이벤트 핸들러를 첨부 할 수 있으며 여전히 작동합니다. 버튼에 발생하지 않는 클릭을 걸러 내면됩니다.

parent.addEventListener('click', function(event) { 
    if(event.target.nodeName == 'INPUT' && event.target.type == "button") { 
     gotoProfile(event.target.id); 
    } 
}, false);