addEventListener에 전달 된 리스너 함수에 인수를 전달하는 방법은 무엇입니까?

Question

anItem.addEventListener("click", iRespond, false); 

문제는 iRespond가 많은 항목에 대한 클릭을 처리하고 항목을 구분하는 방법이 필요하기 때문에 인수에 iRespond를 전달해야합니다.

어떻게하면됩니까?

Answer 1

간단한 폐쇄 :

var foo = "bar"; 
e.addEventListener('whee',function(evt){ 
    iRespond(evt,foo); 
},false); 

(당신은 루프에서와 같이 변화하고 변수에 래치하고 있기 때문에) 간단한 폐쇄는 그 값이되는 새로운 클로저를 만들 필요하지 않을 때 :

예를 들어

foo.addEventListener('bar',(function(jim){ 
    return function(evt){ 
    iRespond(evt,jim); // Surprise surprise, jim is available here! 
    } 
})(someValueToBeNamedJim), false); 

:

var buttons = document.querySelectorAll('button'); 
for (var i=buttons.length;i--;)} 
    buttons[i].addEventListener('click',(function(j){ 
    return function(){ alert("You clicked on button #"+j); }; 
    })(i),false); 
} 

당신은 이름을 선택할 수 있습니다 변수는 내부 및 외부에서 모두 동일한 기능을 수행하지 않습니다. — 예 : j 위의 i 대신 — 위를 사용하고 있지만 혼란 스러울 수 있습니다.

Answer 2

많은 가능성이 있습니다. No1은 그것을위한 클로저를 만들 것입니다. bind()을 사용할 수도 있습니다.

이벤트의 target 속성에 따라 옵션 (항목 당)을 구별하는 것이 더 좋은 해결책 일 수 있습니다.이 옵션은 수신기에도 전달됩니다. 여러 항목에 하나의 핸들러 만 사용하는 경우 매우 유용합니다 (예 : 모든 <li> 요소에 하나가 아닌 <ul>에 추가하십시오. 그런 다음 대상 요소의 ID 또는 데이터 속성을 사용하여 수행 할 작업을 선택하십시오.

Answer 3

아무도 간단한 해결책을 제공하지 않는 것 같습니다.

anItem.addEventListener("click", function() { 
    iRespond(your arg here); 
}, false); 

를 또는, 많은 경우에, 당신은 당신이에서 호출 된 객체를 알기 위해 이벤트 리스너에 this 포인터를 참조 할 수 있습니다 : 다음과 같이 익명 함수에서 다른 함수 호출을 넣어

anItem.addEventListener("click", iRespond, false); 

iRespond에이어서

, 상기 'target`를 사용하여 공통 조상 결합 제안한

function iRespond() { 
    // this points to the item that caused the event so you can 
    // determine which one you are processing and then act accordingly 
    // For example, this.id is the id of the object 
}