이벤트리스너 한 번만 발동하게 하기(Remove Event Listener Function Itself)

어떤 요소의 이벤트리스너를 딱 한 번만 발동시키고 싶다면 어떻게 해야 할까요?
addEventListner와 removeEventListner를 적절히 사용해야 되겠죠?
크게 3가지로 나눠 방법을 소개하겠습니다.

1. 함수에 이름 붙여 사용하기

function onClickFunction(){
  eventTarget.removeEventListener('click', onClickFunction)
  alert('event has been removed')
}
eventTarget.addEventListener('click', onClickFunction)

removeEventListener에 함수 이름이 인자로 필요하기 때문에 따로 선언하여 제거하는 모습입니다.

좀 더 간편한 방법은 없을까요?

2. once 옵션 사용하기

eventTarget.addEventListener('click', ()=>{
  aleart('event has been removed')
}, { once: true })

이 방법은 이벤트리스너가 한 번 실행되고 난 후에 삭제됩니다. 간편하지만, 조건에 따라 이벤트리스너를 삭제하고 싶을 때에는 맞지 않는 방법입니다.

3. arguments.callee 사용하기

eventTarget.addEventListener('click', function(){
  eventTarget.removeEventListener('click', arguments.callee)
})

arguments.callee는 현재 실행 중인 함수를 참조할 수 있는 속성입니다. 익명 함수에서 함수를 참조할 때 사용합니다.
이때 콜백 함수는 반드시 function 키워드로 작성하셔야 합니다. 화살표 함수는 arguments의 바인딩이 일어나지 않기 때문입니다.

 

주의하실 점은 arguments.callee는 현재 ES5 이후에서는 strict mode에서 사용이 금지되었습니다. 따라서 엄격 모드에서는 1번에서 소개한 방법으로 함수에 이름을 붙여 만드신 후 사용하시길 바랍니다.