🌐 이벤트 리스너 제거 & 이벤트 한번만 실행 방법

이벤트 제거하기

자바스크립트에서 addEventListener()를 사용해 이벤트를 추가한 경우, 반대로 이를 제거할 수 있으며 이때 removeEventListener() 를 사용한다.

removeEventListener()함수는 EventTarget에 등록되었던 이벤트 리스너를 제거하는데, 이 이벤트 리스너는 이벤트 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되며, 제공되었던 다양한 옵션의 일치하는 이벤트 리스너만 제거가 가능하다.

element.removeEventListener('이벤트타입', 이벤트 콜백 함수)

다만 여기서 유의할점이 있는데, 보통 여러분은 이벤트를 등록할때 addEventListener의 콜백 함수를 익명함수로 해서 코딩을 할 것이다. 왜냐하면 익명함수로 하는것이 가독에도 좋고 코드도 보기 좋아지기 때문이다.

element.removeEventListener('이벤트타입', function() {
	//... 이벤트 콜백 코드
})

 

그러나 removeEventListener() 함수로 이벤트를 제거 할때 몇가지 요소가 필요한데, 제거할 엘리먼트(element) 요소와 click이나 keypress 등의 이벤트 타입 그리고 제거할 이벤트 callback 함수를 필요로 한다.

만일 익명 함수로 addEventListener를 등록했다면, 이 익명함수에 접근할 방법이 없어서 이벤트 제거를 못하게 되게 된다. 따라서 따로 함수를 정의해서 이벤트 바인딩을 하는 식으로 해야, 나중에 이벤트 제거도 가능하다.

// 이벤트 콜백함수를 따로 정의
function onClickFunction(){
  alert('Hello World !')
}

// 이벤트 등록
eventTarget.addEventListener('click', onClickFunction)

// 이벤트 제거
// eventTarget에 걸려있는 click이벤트와 콜백함수 onClickFunction을 제거
eventTarget.removeEventListener('click', onClickFunction)

---

arguments.callee 사용하기

만일 일일히 익명 콜백 함수를 밖으로 일일히 빼내서 정의하기엔 양이 많다면, 익명 콜백함수를 써도 이벤트 제거가 가능한 방법이 한가지 존재한다. arguments.callee 는 현재 실행 중인 함수를 참조할 수 있는 속성인데, 익명 함수에서도 함수를 참조를 할 수 있다. 이를 이용해서 등록된 이벤트의 콜백 함수 블록 내에 간단하게 코드를 작성하면 이벤트를 제거 할 수 있다. 이때 이벤트 함수의 콜백 함수는 반드시 function 키워드로 작성해야 된다. 화살표 함수는 event 객체와 더불어 arguments의 바인딩이 일어나지 않기 때문에 이벤트 함수에는 사용을 권고하지 않는다.

// 이벤트 등록
eventTarget.addEventListener('click', function(){
    // .. 이벤트 익명 콜백함수 실행 
    
	// 이벤트 제거
    eventTarget.removeEventListener('click', arguments.callee)
})

제이쿼리로 하는 방법은 아래 포스팅으로 따로 정리했다.

[jQuery] 📚 제이쿼리 이벤트 💯 정리

---

이벤트 단 한번만 실행되도록 하기

만일 그냥 한번만 이벤트 발생을 실행하고 싶다면, 등록하고 삭제하는 식보다는 아예 처음부터 한번만 실행하도록 옵션을 주면 된다. addEventListener() 메소드의 3번째 파라미터로 { once : true } 인 객체를 전달하면 간단히 적용이 된다.

eventTarget.addEventListener('click', function() {
  alert('안녕하세요!!');
}, { once : true });