기본적인 이벤트 핸들러의 선언 및 제거방법
//실행 될 이벤트
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);
});
removeEventListener 활용 예)
비디오 재생 여부를 timeupdate 이벤트로 판별할 때
이벤트 핸들러를 제거하지 않으면 해당 이벤트가 계속 실행되니
removeEventListener 를 잘 활용해주자
See the Pen video play image by juein (@juein) on CodePen.