[Javascript] 이벤트 제거하기

이벤트 제거하기

자바스크립트에서 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)
})