이벤트 핸들러(event handler) 또는 이벤트 리스너(event listener)는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수다. 다시 말해, 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러다.
이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 하며, DOM Level 2에서 도입된 EventTarget.prototype.addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있다. - 이웅모, 모던 자바스크립트 Deep Dive 40장
Javascript에서 addEventListner 함수를 이용하면 하나의 요소(HTML Element)에 같은 이벤트 타입에 해당하는 이벤트 핸들러를 여러개 등록할 수 있다. 예를 들어 click 이벤트 타입으로 함수 A와 함수 B를 모두 등록하면 버튼을 눌렀을 때 둘 다 호출할 수 있다.
그러나 한 버튼에 동일한 이벤트 핸들러를 여러번 등록하면 한 번만 호출된다. 즉, handleClick 함수를 여러번 add해도 한 번만 add 된다.
handleClick을 두 번 호출하려면?
addEventListener는 잘 쓰이지 않는 세 번째 인자가 있다. capturing phase에 호출될 것인지를 결정하는 boolean 값인데 입력하지 않으면 false가 default로 설정되어 bubbling phase에 이벤트 핸들러가 호출된다.
그렇다면 이벤트 핸들러를 등록할 때 세번째 함수 인자를 다르게 하여 동일한 핸들러를 등록하면 어떻게 될까? 아래 예제에서 확인해보자.
동일한 handleClick 함수를 클릭 이벤트 핸들러로 두 번 등록하여도 세 번째 인자를 다르게 하면 capture와 bubble 시점에 각각 등록되어 동일한 함수라도 두 번 호출되는 것을 확인할 수 있다.
RemoveEventListener
removeEventListener의 경우 add 했을 때 입력했던 인자와 완전히 동일해야만 이벤트 핸들러를 제거할 수 있다. 동일한 함수를 capture와 bubble 시점에 각각 등록한 후에 하나만 Remove를 수행하면 어떻게 될까?
인자가 동일한 event만 삭제된다는 것은 bubble/capture 시점을 구분하여 삭제한다는 뜻이기도 하다. 따라서 같은 함수를 addEventListener로 등록할 때 bubble과 capture 시점에 각각 등록했다면 removeEventListener도 각각 수행해야 한다.
