JavaScript에서는 사용자의 동작에 따라 다양한 이벤트를 활용하여 동적으로 반응하는 웹 페이지를 만들 수 있다. 이번에는 주요 이벤트 타입들을 정리하고, 각각이 어떤 상황에서 발생하는지 살펴본다.
마우스 이벤트
사용자의 마우스 조작에 반응하는 이벤트다.
| 이벤트 타입 | 설명 |
|---|---|
mousedown | 마우스 버튼을 누르는 순간 |
mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
click | 왼쪽 버튼을 클릭한 순간 |
dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
contextmenu | 오른쪽 버튼을 클릭한 순간 |
mousemove | 마우스를 움직이는 순간 |
mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링 없음) |
mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링 없음) |
키보드 이벤트
키보드의 입력과 관련된 이벤트다.
| 이벤트 타입 | 설명 |
|---|---|
keydown | 키보드의 버튼을 누르는 순간 |
keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력 가능한 키에서만 동작) |
keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
포커스 이벤트
입력 요소가 활성화되거나 비활성화될 때 발생하는 이벤트다.
| 이벤트 타입 | 설명 |
|---|---|
focusin | 요소에 포커스가 되는 순간 |
focusout | 요소로부터 포커스가 빠져나가는 순간 |
focus | 요소에 포커스가 되는 순간 (버블링 없음) |
blur | 요소로부터 포커스가 빠져나가는 순간 (버블링 없음) |
입력 이벤트
입력 필드에서 값이 변경되거나 특정 동작이 발생할 때 사용한다.
| 이벤트 타입 | 설명 |
|---|---|
change | 입력된 값이 바뀌는 순간 |
input | 값이 입력되는 순간 |
select | 입력 양식의 하나가 선택되는 순간 |
submit | 폼을 전송하는 순간 |
스크롤 이벤트
페이지나 요소 내에서 스크롤이 발생할 때 반응한다.
| 이벤트 타입 | 설명 |
|---|---|
scroll | 스크롤 바가 움직일 때 |
윈도우 창 이벤트
브라우저 창의 크기 변경 등과 관련된 이벤트다.
| 이벤트 타입 | 설명 |
|---|---|
resize | 윈도우 사이즈를 움직일 때 발생 |
요약
이벤트는 마우스, 키보드, 포커스, 입력, 스크롤, 창 크기 변경 등 다양한 상황에서 발생할 수 있다. 각각의 이벤트는 적절한 상황에서 활용될 때 웹 페이지의 동적 인터랙션을 강화할 수 있다. 필요한 이벤트 타입을 미리 알아두고, 적재적소에 활용하는 것이 중요하다.
MOON.DEVLOG