JavaScript 브라우저 이벤트 완벽 가이드: 이벤트의 개념부터 커스텀 이벤트 활용까지

이벤트(Event)란 무엇인가?

이벤트란 어떤 일이 발생했음을 알리는 신호를 의미합니다. 웹 브라우저에서 사용자가 버튼을 클릭하거나, 키보드를 누르거나, 페이지가 로딩되는 등 다양한 상황에서 이벤트가 발생합니다.

DOM에는 이미 여러 유용한 내장 이벤트가 정의되어 있습니다. 대표적인 예시는 다음과 같습니다.

• click — 포인팅 장치(마우스 등)의 버튼을 요소 위에서 눌렀다가 놓았을 때 발생하는 이벤트입니다.
• mouseover — 포인터가 이벤트 리스너가 연결된 요소 또는 그 자식 요소 위로 이동할 때 발생합니다.
• keyup — 키보드의 아무 키나 놓았을 때(눌렀다가 뗐을 때) 발생합니다.
• load — 리소스와 해당 리소스가 의존하는 모든 하위 리소스의 로딩이 완료되었을 때 발생합니다.

커스텀 이벤트 만들기

내장 이벤트뿐만 아니라 new Event() 생성자를 사용하여 직접 커스텀 이벤트를 만들 수도 있습니다.

new Event('my-event');

dispatchEvent로 이벤트 발생시키기

만든 이벤트는 dispatchEvent() 메서드를 통해 특정 요소에서 발생시킬 수 있습니다.

HTML:

<div id="my-div"></div>

JS:

const myDiv = document.querySelector('#my-div')
myDiv.dispatchEvent(new Event('my-event'));

addEventListener로 이벤트 리스너 등록하기

addEventListener()를 사용하면 특정 이벤트를 받았을 때 실행할 동작을 정의할 수 있습니다.

HTML:

<div id="my-div"></div>

JS:

const myDiv = document.querySelector('#my-div')

myDiv.addEventListener(
    // 감지하고 싶은 이벤트 이름
    'my-event',
    // 핸들러 함수
    (e) => alert('Event fired!')
);

myDiv.dispatchEvent(new Event('my-event'));

코드 실행 결과 살펴보기

위 코드를 실행하면 <div> 요소에 my-event 이벤트를 감지하는 리스너가 연결됩니다. 이후 해당 이벤트가 발생하면 콜백 함수가 호출됩니다.

이 예제에서는 직접 dispatchEvent()로 이벤트를 발생시켰기 때문에, 코드가 실행되는 즉시 이벤트가 트리거되고 화면에 경고창(alert)이 나타나는 것을 확인할 수 있습니다.

이처럼 JavaScript의 이벤트 시스템을 활용하면 사용자 입력에 반응하는 인터랙티브한 웹 페이지를 손쉽게 구축할 수 있으며, 커스텀 이벤트를 통해 컴포넌트 간 통신도 유연하게 처리할 수 있습니다.