이벤트 핸들러(event handler) : 이벤트 발생했을 때 호출될 함수
이벤트 핸들러 등록 : 이벤트가 발생했을 때 브라우저에게 알려 호출을 위임하는 것
이벤트와 그에 대응하는 함수(이벤트 핸들러)를 통해 사용자와 애플리케이션은 상호작용을 할 수 있다.
프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라고 한다.
이벤트 타입은 이벤트의 종류를 나타내는 문자열이다.
이벤트 타입은 약 200여가지가 있다.
이벤트 핸들러를 등록하는 방법은 3가지(이벤트 핸들러 어트리뷰트 방식, 이벤트 핸들러 프로퍼티 방식, addEventListener 메서드 방식)이다.
HTML 요소의 어트리뷰트 중에는 이벤트에 대응하는 이벤트 핸들러 어트리뷰트가 있다.
이벤트 핸들러 어트리뷰트의 이름은 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.
이벤트 핸들러 어트리뷰트 값으로 함수 호출문 등의 문(statement)을 할당하면 이벤트 핸들러가 등록된다.
이때 이벤트 핸들러 어트리뷰트 값은 사실 암묵적으로 생성될 이벤트 핸들러의 함수 몸체를 의미하며, 이벤트 핸들러 어트리뷰트 값으로 여러 개의 문을 할당할 수도 있다.
<aside> <img src="/icons/chat_gray.svg" alt="/icons/chat_gray.svg" width="40px" /> 모던 자바스크립트에서는 이벤트 핸들러 어트리뷰트 방식을 사용하는 경우가 있다. CBD 방식의 Angular/React/Svelte/Vue.js 같은 프레임워크/라이브러리에서는 이벤트 핸들러 어트리뷰트 방식으로 이벤트를 처리한다. 이는 CBD에서 HTML, CSS, JavaScript를 관심사가 다른 개별적인 요소가 아닌, 뷰를 구성하기 위한 구성 요소로 보기 때문이다.
</aside>
window 객체와 Document, HTMLElement 방식의 DOM 노드 객체는 이벤트에 대응하는 이벤트 핸들러 프로퍼티를 가지고 있다.
이벤트 핸들러 프로퍼티의 키는 이벤트 핸들러 어트리뷰트와 마찬가지로 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있다.
이벤트 핸들러 프로퍼티에 함수를 바인딩하면 이벤트 핸들러가 등록된다.
이때 이벤트 핸들러를 등록하기 위해서는 이벤트 타깃과 이벤트 타입, 이벤트 핸들러를 지정할 필요가 있다.
모던 자바스크립트 Deep Dive, p.761, 그림 40-2 참조
이벤트 핸들러는 대부분 이벤트를 발생시킬 이벤트 타깃에 바인딩하지만, 전파된 이벤트를 캐치할 DOM 노드 객체에 바인딩하기도 한다.
<aside> <img src="/icons/chat_gray.svg" alt="/icons/chat_gray.svg" width="40px" /> 이벤트 핸들러 어트리뷰트 방식도 결국 DOM 노드 객체의 이벤트 핸들러 프로퍼티로 변환되므로 결과적으로 이벤트 핸들러 프로퍼티 방식과 동일하다고 할 수 있다.
이벤트 핸들러 프로퍼티 방식은 이벤트 핸들러 어트리뷰트 방식의 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수 있지만, 이벤트 핸들러 프로퍼티에 하나의 이벤트 핸들러만 바인딩할 수 있다는 단점이 있다.
</aside>