JavaScript EventListener

.addEventListner()

대상에 이벤트를 등록합니다. 지정한 이벤트가 발생했을 때, 지정한 함수(Handler)가 호출됩니다.

const el = document.querySelector('.div');
el.addEventListener('click', () =>{});

.removeEventListener()

대상에 등록했던 이벤트를 제거합니다.
메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요하기도 합니다.

주의점이 있습니다.
addEventListener에서 콜백을 즉시실행함수(IIFE)로 작성하는 경우가 많습니다. 그러나 removeEventListener를 사용해야 할 때에는 해당 함수를 참조할 수 없게 됩니다.
이러한 경우에는 함수를 변수에 할당해서 사용해야 제어가 가능해집니다.

const el = document.querySelector('.div');
const handler = () => {}

el.addEventListener('click', handler);
el.removeEventListener('click', handler);