HTML 이벤트 핸들러 속성
이벤트를 발생시킬 수 있는 방법은 매우 다양하며, 아래와 같은 상황에서 발생한다.
- 사용자가 키보드의 키를 누르거나 마우스를 클릭하는 경우
- 페이지 로딩과 같이 자동적으로 실행되는 페이지 처리
- 타이머를 이용한 일정 간격으로 발생하는 이벤트 혹은 일정 시간이 지난 후 발생하는 이벤트
- 자바스크립트를 이용한 특정 동작에 반응하는 자바스크립트 이벤트 핸들러를 요소의 이벤트에 연결할 수 있다.
이벤트 핸들러는 HTML 태그의 특성에 대응한다.
<input type="button" value="확인" onclick="alert('정말 실행할까요?')"- 자바스크립트에는 폼, 키보드, 마우스, 미디어, 윈도우 이벤트가 정의되어 있다.
Window(윈도우) 이벤트
window 관련 이벤트는 <body> 태그를 통해 활용이 가능하다.
| 속성 | 스크립트의 실행 시점 |
|---|---|
| onafterprint | HTML5에 추가된 속성으로 인쇄가 완료된 후 |
| onbeforeprint | HTML5에 추가된 속성으로 인쇄가 시작되기 전 |
| onbeforeonload | HTML5에 추가된 속성으로 페이지가 로드되기 전 |
| onblur | Window 객체가 포커스를 잃었을 때 |
| onerror | HTML5에 추가된 속성으로 오류가 발생했을 때 |
| onfocus | Window 객체가 포커스를 얻었을 때 |
| onhaschange | HTML5에 추가된 속성으로 페이지가 변경되었을 때 |
| onload | 페이지가 로드된 후 |
| onmessage | HTML5에 추가된 속성으로 메시지가 표시될 때 |
| onoffline | HTML5에 추가된 속성으로 페이지가 오프라인 모드로 동작할 때 |
| ononline | HTML5에 추가된 속성으로 페이지가 온라인 모드로 동작할 때 |
| onpagehide | HTML5에 추가된 속성으로 브라우저 창이 숨겨질 때 |
| onpageshow | HTML5에 추가된 속성으로 브라우저 창이 나타날 때 |
| onpopstate | HTML5에 추가된 속성으로 브라우저 창의 히스토리가 변경될 때, 이 이벤트는 페이지를 다시 로드하지 않고 자바스크립트를 이용하여 브라우저가 표시하는 URL을 변경하는 방법을 제공한다. 이 이벤트는 또한 브라우저의 [뒤로] 버튼에 대한 이벤트도 발생시킨다. |
| onredo | HTML5에 추가된 속성으로 다시 실행 명령이 실행된 후 |
| onresize | HTML5에 추가된 속성으로 브라우저 창의 크기가 변경된 후 |
| onstorage | HTML5에 추가된 속성으로 페이지가 로드된 후 |
| onundo | HTML5에 추가된 속성으로 실행 취소 메뉴가 실행된 후 |
| onunload | HTML5에 추가된 속성으로 사용자가 페이지를 떠날 때 |
Form(폼) 이벤트
폼 이벤트는 HTML 폼 내에서의 동작에 의해 실행되는 글로벌 이벤트들이다.
| 속성 | 스크립트의 실행 시점 |
|---|---|
| onblur | 요소가 포커스를 잃을 때 |
| onchange | 요소의 값이 변경될 때 |
| oncontextmenu | HTML5에 추가된 속성으로 요소의 컨텍스트 메뉴가 나타날 때 |
| onfocus | 요소가 포커스를 얻었을 때 |
| onformchange | HTML5에 추가된 속성으로 폼이 변경될 때 |
| onforminput | HTML5에 추가된 속성으로 사용자가 폼 컨트롤에 값을 입력할 때 |
| oninput | HTML5에 추가된 속성으로 사용자가 요소에 입력할 때 |
| onreset | HTML5에서는 권장되지 않음 |
| oninvaild | HTML5에 추가된 속성으로 요소의 값이 유효하지 않을 때 |
| onselect | 요소가 선택되었을 때 |
| onsubmit | 폼이 전송될 때 |
Keyboard(키보드) 이벤트
키보드에 의해 발생되는 글로벌 이벤트들이다.
| 속성 | 스크립트의 실행 시점 |
|---|---|
| onkeydown | 키가 눌렸을 때 |
| onkeypress | 키를 눌렀다가 뗄 때 |
| onkeyup | 키를 뗄 때 |
Mouse(마우스) 이벤트
마우스 혹은 그와 유사한 동작에 의해 발생하는 글로벌 이벤트들이다.
| 속성 | 스크립트의 실행 시점 |
|---|---|
| onclick | 마우스를 클릭할 때 |
| ondbclick | 마우스를 더블 클릭할 때 |
| ondrag | HTML5에 추가된 속성으로 요소를 드래그하기 시작했을 때 |
| ondragend | HTML5에 추가된 속성으로 요소의 드래그를 마쳤을 때 |
| ondragenter | HTML5에 추가된 속성으로 요소를 드래그하여 유효한 대상 요소에 드롭할 때 |
| ondragleave | HTML5에 추가된 속성으로 요소가 유효한 대상 요소의 바깥으로 드래그될 때 |
| ondragover | HTML5에 추가된 속성으로 요소가 유효한 대상 요소의 안쪽에서 드래그될 때 |
| ondragstart | HTML5에 추가된 속성으로 드래그 동작을 시작할 때 |
| ondrop | HTML5에 추가된 속성으로 요소가 드롭될 때 |
| onmousedown | 마우스 버튼이 눌릴 때 |
| onmousemove | 마우스 포인터가 움직일 때 |
| onmouseout | 마우스 포인터가 요소의 영역 바깥으로 이동했을 때 |
| onmouseup | 마우스 버튼을 뗄 때 |
| onmousewheel | HTML5에 추가된 속성으로 마우스 휠을 돌릴 때 |
| onscroll | HTML5에 추가된 속성으로 스크롤바가 스크롤될 때 |
'웹코딩 > HTML' 카테고리의 다른 글
| 파비콘(Favicon)의 모든 것 (29) | 2015.05.14 |
|---|---|
| MIME 타입 (0) | 2015.05.13 |
| 글로벌 속성(Global Attribute) #2 - CONTENTEDITABLE, CONTEXTMENU, DATA-*, DRAGGABLE, DROPZONE, HIDDEN, SPELLCHECK, TRANSLATE (0) | 2015.05.12 |
| 글로벌 속성(Global Attribute) - ACCESSKEY, CLASS, DIR, ID, LANG, STYLE, TABINDEX, TITLE (0) | 2015.05.12 |
| 본문 : 상호작용(Interactive) 요소 - DETAILS, SUMMARY, MENU, COMMAND (0) | 2015.05.11 |
