[javascript] 이벤트 핸들러 1번만 적용하고 제거하기

기본적인 이벤트 핸들러의 선언 및 제거방법

 

//실행 될 이벤트
function test(){}

이벤트 핸들러 선언
element.addEventListener("click", test);

이벤트 핸들러 제거
element.removeEventListener("click", test);

익명함수를 콜백으로 쓰게 될 경우엔
element.addEventListener("click", function(){
 test();
 
 // 선언한 클릭이벤트가 전부 제거 되어버림	
 this.removeEventListener("click");  
 
 // arguments.callee 를 사용하면 원하는 이벤트만 제거
 this.removeEventListener("click",arguments.callee);  

});

 

활용 예) 비디오 재생 여부를 timeupdate 이벤트로 판별할 때

이벤트 핸들러를 제거하지 않으면 해당 이벤트가 계속 실행되니

removeEventListener 를 잘 활용해주자

 

See the Pen video play image by juein (@juein) on CodePen.