모던 자바스크립트 Deep Dive - 이벤트 핸들러 등록과 제거

브라우저는 처리해야 할 특정 사건이 발생하면 감지하여 이벤트를 발생 시킨다.

이벤트 핸들러 : 이벤트가 발생했을 때 호출될 함수
이벤트 핸들러 등록 : 브라우저에 이벤트 핸들러의 호출을 위임하는 것

함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 호출하는 것이 아니라 브라우저에게 호출을 위임한다.

이벤트 핸들러 프로퍼티에 함수를 할당하면 해당 이벤트가 발생했을 때 할당한 함수가 브라우저에 의해 호출된다.

https://developer.mozilla.org/ko/docs/Web/Events

이벤트 참조 | MDN

 

---

이벤트 핸들러 등록

---

[ 1 ] 이벤트 핸들러 어트리뷰트 방식

<button onclick = "sayHi('Kim')"> Click me ! </button>

HTML 요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.
어트리뷰트의 이름은 'on' + '이벤트 타입' 으로 이루어진다.
어트리뷰트의 값으로 함수 호출문 을 할당한다.

어트리뷰트의 값으로 함수 참조가 아니라 함수 호출문이다. 

원래, 함수 참조를 등록해야 브라우저가 이벤트 핸들러를 호출할 수 있다.
하지만, 어트리뷰트 값은 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미하기 떄문이다.

즉, onclick = "sayHi('Kim')" 은

function onclick(event){
    sayHi('Kim');
}

위 함수를 암묵적으로 생성하고, 이벤트 핸들러 어트리뷰트 이름과 동일한 키 onclick 이벤트 핸들러 프로퍼티에 할당한다.

 

이벤트 핸들러 어트리뷰트 방식은 HTML 코드에 JavaScript가 공존해 있는 방식이다. 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋기 때문에, 더는 사용하지 않는 것이 좋다.

하지만, CBD 방식의 React / Angular 등은 HTML, CSS , JS를 관심사가 다른 개별적인 요소가 아닌, 뷰를 구성하기 위한 구성 요소로 보기 때문에 관심사가 다르다고 생각하지 않기 때문에 위와 같은 방식을 사용한다.

 

[ 2 ] 이벤트 핸들러 프로퍼티 방식

const $button = document.querySelector('.button');

$button.onclick = sayHi;

window 객체와 Document, HTMLElement 타입의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로파티를 가지고 있다.

이벤트 핸들러 프로퍼티의 키는 'on' + '이벤트 타입' 으로 이루어져있다.
이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.

이벤트 핸들러를 등록하기 위해서는
$button과 같이 이벤트 타깃
onclick 과 같이 이벤트 타입
sayHi와 같이 이벤트 핸들러 를 지정해야 한다.

이벤트 핸들러 어트리뷰트와 굉장히 유사하지만, HTML과 JS를 분리하였다.
단점으로는 하나의 이벤트만 바인딩할 수 있다.

 

[ 3 ] addEventListener 메서드 방식

const $button = document.querySelector('.button');
$button.addEventListener('click',sayHi);

$button 과 같이 이벤트 타킷
addEventListener 메서드로 이벤트 핸들러를 등록한다.

addEventListener의 첫 번째 매개변수로는 이벤트 타입을
두 번째 매개변수로는 이벤트 핸들러를 등록한다.
세 번째 매개변수는 이벤트 전파단계를 지정한다.

addEventListener 메서드 방식은 이벤트 핸들러 프로퍼티 방식의 단점을 보완한다.
등록한 이벤트를 모두 사용한다. => 등록된 순서로 호출

---

이벤트 핸들러 제거

---

const $button = document.querySelector('.button');

$button.removeEventListener('click',sayHi);

위 예시와 같이 removeEventListener 메서드를 사용하여 이벤트를 제거할 수 있다.

단, addEventListener로 이벤트를 등록할때 인수로 넣어준 매개변수 값들이 모두 일치해야한다.