생성시 EventListener를 제거하는 방법은 무엇입니까?

Question

개체의 EventListeners를 대기열 정렬로 제거하는 방법이 필요합니다. 추가 된 첫 번째 EventListener가 목록의 첫 번째 항목이거나 제거 된 첫 번째 항목입니다. 나는의 EventListener가 무엇을하는지 모른다 (하지만 난의 EventListener를 보유하고있는 객체 알 수 있습니까) 내가 가진 경우
처럼을 경우에도
이 설정 :

var btn = document.getElementById("mybtn"); 
 
// Some example listeners, some don't make sense. 
 
btn.addEventListener("click", onClick, false); 
 
btn.addEventListener("keydown", onKeyDown, false); 
 
btn.addEventListener("keyup", onKeyUp, false); 
 

 
function onClick(){ 
 
    alert("You clicked me!"); 
 
} 
 

 
function onKeyDown(){ 
 
    console.log("Key down"); 
 
} 
 

 
function onKeyUp(){ 
 
    console.log("Key up"); 
 
}

<button id="mybtn">Do stuff! I use listeners.</button>

mybtn에 3 개의 EventListners가 있습니다. 자, 내가 처음 추가 한 EventListener를 제거하거나 EventListeners 목록을 가져 와서 목록에서 제거하는 방법은 무엇입니까?


그렇게 할 방법이 있습니까?

Answer 1

이벤트 수신기를 제거하는 유일한 방법은 removeEventListener을 호출하고 제거 할 수신기를 인수로 전달하는 것입니다.

원하는 것을 얻으려면 직접 추가 한 순서대로 리스너 목록을 유지 관리해야합니다.

다른 유형의 리스너를 다루고 있으므로 유형도 추적해야합니다.

function someListener(e) {} 
function someOtherListener(e) {} 
function someOtherListener(e) {} 

var tracker = []; 

btn.addEventListener("click", someListener, false); 
tracker.push({ event: "click", listener: someListener }); 
btn.addEventListener("keydown", someOtherListener, false); 
tracker.push({ event: "keydown", listener: someOtherListener }); 
btn.addEventListener("keyup", someOtherListener, false); 
tracker.push({ event: "keyup", listener: someOtherListener }); 

var remove = tracker.unshift(); 
btn.removeEventListener(remove.event, remove.listener); 

(NB :. 위의 더 우아한 방법의 경우, 배열하고 청취자를 추가하는 동안 다음 루프를 만들 수)