HTML5 표준 이벤트란?
사용자가 웹사이트를 방문하면 텍스트나 이미지를 클릭하고, 링크를 따라 이동하며, 특정 요소 위에 마우스 커서를 올리는 등 다양한 행동을 합니다. 이처럼 페이지 안에서 일어나는 모든 상호작용이 바로 자바스크립트(JavaScript)에서 말하는 이벤트(Event)입니다.
개발자는 이벤트 핸들러(event handler)를 자바스크립트 또는 VBScript로 작성할 수 있으며, 작성된 핸들러를 HTML 태그의 이벤트 속성(attribute) 값으로 지정하여 사용합니다. HTML5 명세에는 아래와 같이 매우 다양한 이벤트 속성이 정의되어 있는데, 이해하기 쉽도록 카테고리별로 분류해서 정리했습니다.
1. 윈도우 및 문서(Window / Document) 이벤트
브라우저 창과 문서 전체의 상태 변화와 관련된 이벤트입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| onafterprint | script | 문서가 인쇄된 직후에 실행됩니다. |
| onbeforeprint | script | 문서가 인쇄되기 전에 실행됩니다. |
| onbeforeonload | script | 문서가 로드되기 전에 실행됩니다. |
| onblur | script | 창(window)이 포커스를 잃었을 때 실행됩니다. |
| onerror | script | 오류가 발생했을 때 실행됩니다. |
| onfocus | script | 창이 포커스를 얻었을 때 실행됩니다. |
| onhaschange | script | 문서 내용이 변경되었을 때 실행됩니다. |
| onload | script | 문서 로딩이 완료되었을 때 실행됩니다. |
| onmessage | script | 메시지 이벤트가 발생했을 때 실행됩니다. |
| onoffline | script | 문서가 오프라인 상태가 되었을 때 실행됩니다. |
| ononline | script | 문서가 온라인 상태로 전환되었을 때 실행됩니다. |
| onpagehide | script | 창이 화면에서 숨겨졌을 때 실행됩니다. |
| onpageshow | script | 창이 화면에 표시되었을 때 실행됩니다. |
| onpopstate | script | 창의 히스토리(history)가 변경되었을 때 실행됩니다. |
| onredo | script | 문서에서 다시 실행(redo) 작업이 수행될 때 실행됩니다. |
| onresize | script | 창 크기가 조절되었을 때 실행됩니다. |
| onstorage | script | 웹 스토리지 영역이 업데이트되었을 때 실행됩니다. |
| onundo | script | 문서에서 실행 취소(undo) 작업이 수행될 때 실행됩니다. |
| onunload | script | 사용자가 문서를 떠날 때 실행됩니다. |
2. 폼(Form) 이벤트
입력 폼과 관련된 사용자 상호작용 이벤트입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| onformchange | script | 폼이 변경되었을 때 실행됩니다. |
| onforminput | script | 폼이 사용자 입력을 받았을 때 실행됩니다. |
| onchange | script | 요소의 값이 변경되었을 때 실행됩니다. |
| oninput | script | 요소가 사용자 입력을 받았을 때 실행됩니다. |
| oninvalid | script | 요소가 유효하지 않을 때 실행됩니다. |
| onselect | script | 요소가 선택되었을 때 실행됩니다. |
| onsubmit | script | 폼이 제출(submit)될 때 실행됩니다. |
3. 키보드(Keyboard) 이벤트
키보드 입력과 관련된 이벤트입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| onkeydown | script | 키를 누르는 순간 실행됩니다. |
| onkeypress | script | 키를 눌렀다가 뗐을 때 실행됩니다. |
| onkeyup | script | 키에서 손을 뗐을 때 실행됩니다. |
4. 마우스(Mouse) 이벤트
마우스 클릭, 이동, 스크롤 등과 관련된 가장 많이 사용되는 이벤트입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| onclick | script | 마우스로 클릭했을 때 실행됩니다. |
| ondblclick | script | 마우스를 더블클릭했을 때 실행됩니다. |
| oncontextmenu | script | 컨텍스트 메뉴(마우스 우클릭 메뉴)가 호출될 때 실행됩니다. |
| onmousedown | script | 마우스 버튼을 누르는 순간 실행됩니다. |
| onmousemove | script | 마우스 포인터가 이동할 때 실행됩니다. |
| onmouseout | script | 마우스 포인터가 요소 밖으로 벗어났을 때 실행됩니다. |
| onmouseover | script | 마우스 포인터가 요소 위로 진입했을 때 실행됩니다. |
| onmouseup | script | 마우스 버튼에서 손을 뗐을 때 실행됩니다. |
| onmousewheel | script | 마우스 휠을 회전할 때 실행됩니다. |
| onscroll | script | 요소의 스크롤바가 스크롤될 때 실행됩니다. |
5. 미디어(Media) 이벤트
오디오·비디오 등 멀티미디어 요소의 재생 상태와 관련된 이벤트입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| onabort | script | 재생이 중단(abort)되었을 때 실행됩니다. |
| oncanplay | script | 미디어 재생이 가능하지만 버퍼링으로 일시 중단될 수 있는 상태일 때 실행됩니다. |
| oncanplaythrough | script | 버퍼링 없이 끝까지 재생할 수 있는 상태일 때 실행됩니다. |
| ondurationchange | script | 미디어 길이(duration)가 변경되었을 때 실행됩니다. |
| onemptied | script | 미디어 리소스가 갑자기 비워졌을 때 실행됩니다. |
| onended | script | 미디어 재생이 끝에 도달했을 때 실행됩니다. |
| onloadeddata | script | 미디어 데이터가 로드되었을 때 실행됩니다. |
| onloadedmetadata | script | 미디어의 길이 등 메타데이터가 로드되었을 때 실행됩니다. |
| onloadstart | script | 브라우저가 미디어 데이터 로드를 시작할 때 실행됩니다. |
| onpause | script | 미디어가 일시정지되었을 때 실행됩니다. |
| onplay | script | 미디어 재생이 시작되기 직전에 실행됩니다. |
| onplaying | script | 미디어 재생이 실제로 시작되었을 때 실행됩니다. |
| onprogress | script | 브라우저가 미디어 데이터를 내려받는 중일 때 실행됩니다. |
| onratechange | script | 미디어 재생 속도가 변경되었을 때 실행됩니다. |
| onreadystatechange | script | 준비 상태(ready-state)가 변경되었을 때 실행됩니다. |
| onseeked | script | 미디어 탐색(seeking)이 종료되었을 때 실행됩니다. |
| onseeking | script | 미디어 탐색(seeking)이 시작되었을 때 실행됩니다. |
| onstalled | script | 미디어 데이터를 가져오는 과정에서 오류가 발생했을 때 실행됩니다. |
| onsuspend | script | 미디어 파일 전체를 내려받기 전에 브라우저가 데이터 가져오기를 중단했을 때 실행됩니다. |
| ontimeupdate | script | 미디어의 재생 위치가 변경되었을 때 실행됩니다. |
| onvolumechange | script | 볼륨이 변경되거나 음소거(mute)로 설정되었을 때 실행됩니다. |
| onwaiting | script | 미디어가 일시 중단되었지만 곧 재개될 것으로 예상될 때 실행됩니다. |
6. 드래그 앤 드롭(Drag & Drop) 이벤트
요소를 끌어다 놓는 동작과 관련된 이벤트입니다.
| 속성 | 값 | 설명 |
|---|---|---|
| ondrag | script | 요소를 드래그하는 동안 실행됩니다. |
| ondragend | script | 드래그 작업이 종료되었을 때 실행됩니다. |
| ondragenter | script | 요소가 유효한 드롭 대상 위로 드래그되어 진입했을 때 실행됩니다. |
| ondragleave | script | 요소가 유효한 드롭 대상에서 벗어났을 때 실행됩니다. |
| ondragover | script | 요소가 유효한 드롭 대상 위를 지나가는 동안 실행됩니다. |
| ondragstart | script | 드래그 작업이 시작되는 순간 실행됩니다. |
| ondrop | script | 드래그된 요소가 드롭(dropped)되었을 때 실행됩니다. |
마무리
HTML5의 표준 이벤트 속성들은 단순히 값만 지정하면 되므로 초보자도 쉽게 접근할 수 있습니다. 다만 규모가 큰 프로젝트에서는 HTML 속성 대신 addEventListener() 메서드를 사용해 자바스크립트 코드와 마크업을 분리하는 것이 유지보수 측면에서 더 권장됩니다. 각 이벤트의 발생 시점과 특성을 정확히 이해하고 활용한다면, 사용자 경험이 뛰어난 인터랙티브 웹 페이지를 만들 수 있습니다.