Ellquent JavaScript의 removeEventListener 예제

Question

다음 스크린 샷에서 누군가 button.removeEventListener ("click", once)에 "once"함수를 전달해야하는 이유를 설명해 주실 수 있습니까? removeEventListener 메서드가 두 개의 인수를 필요로하기 때문에 우리는 단순히 그것을 전달합니까? 또한 "once"함수가 removeEventListener 메소드에도 전달되면 "Done"은 콘솔에 두 번 이상 로그되지 않습니다.

Answer 1

당신이 (여기처럼 당신이 바인딩 해제 once 핸들러이다) 특정 핸들러 바인딩을 해제 할

let button = document.getElementById("button"); 
 

 
function once() { 
 
    console.log("Done"); 
 
    button.removeEventListener("click", once); 
 
} 
 
button.addEventListener("click", once);

<button id="button">once</button>

, 당신은 그 두 번째 매개 변수로, 그렇지 않으면 JS는 않을 것 통과해야 제거 할 처리기를 알고 있어야합니다.

각 이벤트에 바인드 된 핸들러가 여러 개있을 수 있습니다.

또한 "once"기능이 removeEventListener 메서드로 전달되면 "Done"이 두 번 이상 콘솔에 기록되지 않는다는 것이 이상하게 보입니다.

그것이 한 번만 호출 된 이유입니다. 당신은 함수 once의 레퍼런스를 넘겨 주므로, JS는 어떤 핸들러를 언 바인딩할지 압니다. removeEventListener에 전화 할 때 전화하지 않습니다.

버튼을 클릭하면 처리기에서이 함수가 호출되고 처리기에서는 console.log이 있으며 바로 등록 해제하면 후자의 클릭으로 더 이상 해당 함수가 실행되지 않습니다.

Answer 2

자바 스크립트의 여러 이벤트를 동일한 작업의 요소에 바인딩 할 수 있습니다.

바운드 이벤트에서 특정 처리기를 제거하려면 해당 처리기 함수 이름을 removeEventListener에 전달해야합니다. removeEventListener에 두 번째 인수를 전달하지 않으면 해당 이벤트에 대한 해당 조치의 모든 핸들러가 제거됩니다.

귀하의 경우에는 처리기 once을 제거해야합니다.

다른 핸들러 예는 설명하기 :

   | script start | nothing happens | once() execute | nothing happens | 
---------------|--------------|-----------------|----------------|-----------------| 
"click" Events | once() added | once() waiting | once() removed |     | 
       | lala() added | lala() waiting | lala() waiting | lala() waiting | 

기능 : removeEventListener

Answer 3

에

function firstListener(e) { 
 
    console.log('firstListener'); 
 
} 
 

 
function secondListener(e) { 
 
    console.log('secondListener'); 
 

 
    // this will remove `firstListener` handler from subsequent button clicks 
 
    e.target.removeEventListener('click', firstListener); 
 
} 
 

 
// bind first event handler function 
 
document.querySelector('#btnMultiEvent').addEventListener('click', firstListener); 
 

 
// bind second event handler function 
 
document.querySelector('#btnMultiEvent').addEventListener('click', secondListener);

<button id="btnMultiEvent">Multiple Event Button</button>

더 날 아스키 코드 표에 설명하게 라라 한 번만 동일하고 "클릭"이벤트에서 자체적으로 제거합니다.