JavaScript 이벤트란?
사용자가 웹페이지와 상호작용할 때 발생하는 동작이나 상황을 의미.
브라우저는 처리해아 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생(trigger)시킨다.
예를 들어, 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감시하여 특정한 타입의 이벤트를 발생시킨다.
만약, 애플리케이션이 특정 타입의 이벤트에 대해 반응하여 어떤 일을 하고 싶다면 해당하는 타입의 이벤트가 발생했을 때 호출될 함수를 브라우저에게 알려 호출을 위임한다.
이때 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러(Event Handler)라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다.
1. 이벤트 타입
이벤트 타입은 이벤트의 종류를 나타내는 문자열이댜.
1) 마우스 이벤트
click: 마우스 버튼 클릭dbclick: 마우스 버튼 더블 클릭mousedown: 마우스 버튼을 눌렀을 때mouseup: 누르고 있던 마우스 버튼을 놓았을 때mousemove: 마우스 커서를 움직였을 때mouseenter: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링되지 않음)mouseover: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링됨)mouseleave: 마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링되지 않음)mouseout: 마우스 커서를 HTML 요소 밖으로 이동했을 때 (버블링됨)
2) 키보드 이벤트
keydown: 모든 키를 눌렀을 때 발생한다.keyup: 누르고 있던 키를 놓았을 때 한 번만 발생한다.keypress: 문자 키를 눌렀을 때 연속적으로 발생한다. (폐지(deprecated)되었으므로 사용하지 않을 것을 권장)
3) 포커스 이벤트
focus: HTML 요소가 포커스를 받았을 때 (버블링되지 않는다.)blur: HTML 요소가 포커스를 잃었을 때 (버블링되지 않는다.)
4) 폼 이벤트
submit: form 요소의 input, select 입력 필드에서 엔터키를 눌렀을 때, form 요소 내의 submit 버튼을 클릭했을 때
5) 값 변경 이벤트
input: input, select, textarea 요소의 값이 입력되었을 때change: input, select, textarea 요소의 값이 변경되었을 때
↪ change 이벤트는 input 이벤트와 달리 HTML 요소가 포커스를 잃었을 때 사용자 입력이 종료되었다고 인식하여 발생한다.
↪ 즉, 사용자 입력을 하고 있을 때는 input 이벤트가 발생하고 사용자 입력이 종료되어 값이 변경되면 change 이벤트가 발생한다.
6) DOM Mutation 이벤트
DOMContentLoaded: HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료되었을 때
7) 뷰 이벤트
resize: 브라우저 윈도우(window)의 크기를 리사이즈 할 때 연속적으로 발생 (오직 window 객체에서만 발생한다.)scroll: 웹페이지(document) 또는 HTML 요소를 스크롤할 때 연속적으로 발생
8) 리소스 이벤트
load: DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스의 로딩이 완료되었을 때 (주로 window 객체에서 발생)unload: 리소스가 언로드 될 때 (주로 새로운 웹페이지를 요청한 경우)
2. 이벤트 주요 개념
1) 이벤트 핸들러(Event handler, Event Listener)
이벤트가 발생했을 때 브라우저에 호출을 위임한 함수. 즉, 이벤트가 발생하면 브라우저에 의해 호출될 함수
addEventListener (이벤트 핸들러 등록)
const button = document.querySelector('button');
const handler = () => console.log('클릭 이벤트 발생');
button.addEventListener('click', handler);removeEventListener (이벤트 핸들러 제거)
const button = document.querySelector('button');
const handler = () => console.log('클릭 이벤트 발생');
button.addEventListener('click', handler);
button.removeEventListener('click', handler);2) 이벤트 객체(Event Object)
이벤트 발생 시 관련 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 이벤트 핸들러의 첫 번째 인수로 전달된다.
주요 이벤트 속성 및 메서드
target: 이벤트를 발생시킨 DOM 요소currentTarget: 이벤트 핸들러가 바인딩 된 DOM 요소preventDefault: 이벤트의 기본 동작 중단
document.querySelector("a").addEventListener("click", (event) => {
event.preventDefault();
console.log("기본 동작 방지");
});stopPropagation: 이벤트 전파를 중단
document.querySelector(".child").addEventListener("click", (event) => {
event.stopPropagation();
console.log("이벤트 전파 중단");
});
clientX/clientY: 뷰포트(웹 페이지의 가시 영역)를 기준으로 마우스 포인터 좌표를 나타냄
document.addEventListener("click", (event) => {
console.log("클릭한 좌표:", event.clientX, event.clientY);
});3) 이벤트 전파
DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트가 DOM 트리를 통해 전파되는 것
이때 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타켓(Event Target)을 중심으로 DOM 트리를 통해 전파된다.
이벤트 전파의 두 가지 방식
- 캡처링(Capturing) : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
- 버블링(Bubbling) : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
// 캡처링 단계 (상위 → 하위)
document.querySelector('.parent').addEventListener('click', () => {
console.log('부모 요소 클릭');
}, true);
// 버블링 단계 (하위 → 상위)
document.body.addEventListener("click", function () {
console.log("버블링 발생");
}, false); 4) 이벤트 위임
이벤트를 상위 요소에 등록해 하위 요소의 이벤트를 처리하는 방식.
즉, 많은 자식 요소에 각각 이벤트를 붙이는 대신, 공통된 부모 요소에 이벤트를 붙여 효율적으로 관리하는 방식이다.
document.querySelector('.list').addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
console.log(`리스트 항목 클릭: ${event.target.textContent}`);
}
});
어제보다 더 나은