티스토리 뷰

HTML

[HTML] HTML 카테고리

HTML 이벤트

HTML 이벤트(HTML Event)은 HTML에 자바스크립트 함수를 호출하기 위한 명령어입니다. 이벤트 처리는 자바스크립트와 같이 이루어져야 하는 부분입니다.


HTML 이벤트

HTML 이벤트에는 Window Event, Form Event, Keyboard Event, Mouse Event, Clipboard Event, Media Event, Misc Event으로 나눌 수 있으며, HTML5에 추가된 기능이 있습니다.

Window Event Attributes

속성 값(예) 설명 버전
onafterprint onafterprint="function()" 문서가 인쇄된 후 스크립 이벤트를 설정합니다. html5
onbeforeprint onbeforeprint="function()" 문서가 인쇄되기 전에 스크립 이벤트를 설정합니다. html5
onbeforeunload onbeforeunload="function()" 사용자가 현재 페이지에서 떠나기 전에 이벤트를 설정합니다. html5
onerror onerror="function()" 페이지가 오류 났을 때 이벤트를 설정합니다. html5
onhashchange onhashchange="function()" URL 앵커 부분의 변화가 있을 때 이벤트를 설정합니다. html5
onload onload="function()" 페이지가 로드되면 이벤트를 설정합니다. -
onmessage onmessage="function()" 메세지가 작동되면 이벤트를 설정합니다. html5
onoffline onoffline="function()" 브라우저가 오프라인 일 때 이벤트를 설정합니다. html5
ononline ononline="function()" 브라우저가 온라인 일 때 이벤트를 설정합니다. html5
onpagehide onpagehide ="function()" 사용자가 다른 페이지로 이동 할 때 이벤트를 설정합니다. html5
onpageshow onpageshow ="function()" 사용자가 다른 페이지로 탐색 할 때 이벤트를 설정합니다. html5
onpopstate onpopstate ="function()" 브라우저 히스토리가 변경될 때 이벤트를 설정합니다. html5
onresize onresize ="function()" 브라우저 크기가 변경될 때 이벤트를 설정합니다. html5
onstorage onstorage ="function()" 브라우저 저장소가 업데이트 될 때 이벤트를 설정합니다. html5
onunload onunload ="function()" 페이지가 로드되지 않거나 닫혔을 때 이벤트를 설정합니다. html5

Form Event Attributes

속성 값(예) 설명 버전
onblur onblur="function()" 요소에 포커스를 잃었을 때 이벤트를 발생합니다. -
onchange onchange="function()" 요소의 값이 변경되었을 때 이벤트를 발생합니다. -
oncontextmenu oncontextmenu="function()" 요쇼의 메뉴가 펼쳐졌을 때 이벤트를 발생합니다. html5
onfocus onfocus="function()" 요소에 포커스 되었을 때 이벤트를 발생합니다. -
oninput oninput="function()" 사용자가 요소에 입력했을 때 이벤트가 발생합니다. html5
oninvalid oninvalid="function()" 사용자가 입력한 요소가 유효하지 않을 때 이벤트가 발생합니다. html5
onreset onreset="function()" 사용자가 리셋 버튼을 눌렀을 경우 이벤트가 발생합니다. html5
onsearch onsearch="function()" 사용자가 검색 영역에 입력할 때 이벤트가 발생합니다. -
onselect onselect="function()" 사용자가 셀렉트 메뉴를 선택했을 때 이벤트가 발생합니다. -
onsubmit onsubmit="function()" 사용자가 입력양식을 보낼 때 이벤트가 발생합니다. -

Keyboard Event Attributes

속성 값(예) 설명 버전
onkeydown onkeydown="function()" 사용자가 키를 눌렀을 때 이벤트를 설정합니다. -
onkeypress onkeypress="function()" 사용자가 키를 누르고 있을 때 이벤트를 설정합니다. -
onkeyup onkeyup="function()" 사용자가 키를 눌렀다 뗐을 때 이벤트를 설정합니다. -

Mouse Event Attributes

속성 값(예) 설명 버전
onclick onclick="function()" 요소를 클릭했을 때 이벤트를 설정합니다. -
ondblclick ondblclick="function()" 요소를 더블 클릭했을 때 이벤트를 설정합니다. -
ondrag ondrag="function()" 요소를 드래그 했을 때 이벤트를 설정합니다. html5
ondragend ondragend="function()" 요소를 드래그하고 끝났을 때 이벤트를 설정합니다. html5
ondragenter ondragenter="function()" 요소를 드래그 하고 있을 때 이벤트를 설정합니다. html5
ondragleave ondragleave="function()" 요소를 드래그 하고 떠났을 때 이벤트를 설정합니다. html5
ondragover ondragover="function()" 타겟 요소 위에 드래그 했을 때 이벤트를 설정합니다. html5
ondragstart ondragstart="function()" 타겟 요소에게 드래그를 시작했을 때 이벤트를 설정합니다. html5
ondrop ondrop="function()" 타겟 요소에 떨어트렸을 때 이벤트를 설정합니다. html5
onmousedown onmousedown="function()" 요소에 마우스를 클릭했을 때 이벤트를 설정합니다. -
onmousemove onmousemove="function()" 타겟 요소에 마우스를 움직였을 때 이벤트를 설정합니다. -
onmouseout onmouseout="function()" 타겟 요소에서 마우스가 벗어 났을 때 이벤트를 설정합니다. -
onmouseover onmouseover="function()" 타겟 요소에 마우스가 오버했을 때 이벤트를 설정합니다. -
onmouseup onmouseup="function()" 타겟 요소에 마우스를 클릭하고 놓았을 때 이벤트를 설정합니다. -
onmousewheel onmousewheel="function()" 마우스 휠을 사용할 때 이벤트를 설정합니다. 현재는 onwheel을 사용합니다. -
onscroll onscroll="function()" 스크롤 했을 때 이벤트를 설정합니다. html5
onwheel onwheel="function()" 마우스 휠을 사용했을 때 이벤트를 설정합니다. html5

Clipboard Event Attributes

속성 값(예) 설명 버전
oncopy oncopy="function()" 사용자가 요소를 복사 했을 때 이벤트를 설정합니다. -
oncut oncut="function()" 사용자가 요소를 잘라내기 했을 때 이벤트를 설정합니다. -
onpaste onpaste="function()" 사용자가 요소를 붙여넣기 했을 때 이벤트를 설정합니다. -

Media Event Attributes

속성 값(예) 설명 버전
onabort onabort="function()" 미디어가 중단되었을 때 이벤트를 발생합니다. -
oncanplay oncanplay="function()" 미디어가 플레이 준비되었을 때 이벤트를 발생합니다. html5
oncanplaythrough oncanplaythrough="function()" 미디어가 버퍼링 되는 동안 이벤트를 발생합니다. html5
oncuechange oncuechange="function()" 트랙 요소가 변경 되었을 때 이벤트를 발생합니다. html5
ondurationchange ondurationchange="function()" 미디어의 길이가 변할 때 이벤트를 발생합니다. html5
onemptied onemptied="function()" 미디어 파일이 갑자기 사용할 수 없을 때 이벤트를 발생합니다. html5
onended onended="function()" 미디어 재생이 끝났을 때 이벤트를 발생합니다. html5
onerror onerror="function()" 미디어 파일이 오류가 발생하면 이벤트를 발생합니다.. html5
onloadeddata onloadeddata="function()" 미디어 파일이 로드될 때 이벤트를 발생합니다. html5
onloadedmetadata onloadedmetadata="function()" 메다데이터를 로드할 때 이벤트를 발생합니다. html5
onloadstart onloadstart="function()" 미디어 파일이 로드되기 전 시작될 때 이벤트를 발생합니다. html5
onpause onpause="function()" 미디어 사용자가 일시 중지시켰을 때 이벤트를 발생합니다. html5
onplay onplay="function()" 미디어가 재생 준비가 되었을 때 이벤트를 발생합니다. html5
onplaying onplaying="function()" 미디어가 실제로 재생하고 있을 때 이벤트를 발생합니다. html5
onprogress onprogress="function()" 브라우저가 미디어 파일을 얻고 있는 과정에 있을 때 이벤트를 발생합니다. html5
onratechange onratechange="function()" 사용자가 미디어 재생 속도(빨리감기,슬로우모션)를 변경했을 때 이벤트를 발생합니다. html5
onseeked onseeked="function()" 미디어의 속성 변경이 끝났을 때 이벤트를 발생합니다. html5
onseeking onseeking="function()" 미디어의 속성 변경이 시작했을 때 이벤트를 발생합니다. html5
onstalled onstalled="function()" 브라우저가 어떠한 이유로 미디어 파일을 가져올 수 없을 때 이벤트를 발생합니다. html5
onsuspend onsuspend="function()" 브라우저가 어떠한 이유로 미디어 파일을 가져오는 것이 중단 됐을 때 이벤트를 발생합니다. html5
ontimeupdate ontimeupdate="function()" 미디어의 재생위치가 사용자에 의해 변경 되었을 때 이벤트를 발생합니다. html5
onvolumechange onvolumechange="function()" 미디어 파일의 볼륨이 변경(무소음도 포함) 되었을 때 이벤트를 발생합니다. html5
onwaiting onwaiting="function()" 미디어가 재생되고 있는 도중 버퍼링 현상이 생겼을 때 이벤트를 발생합니다. html5

Misc Event Attributes

속성 값(예) 설명 버전
onerror onerror="function()" 외부 파일을 로드하는 동안 에러가 발생할 경우 이벤트를 발생합니다. html5
onshow onshow="function()" menu 태그에서 메뉴가 보여졌을 때 이벤트를 발생합니다. html5
ontoggle ontoggle="function()" details 태그에서 요소가 열리고 닫힐 때 이벤트를 발생합니다. html5
댓글
댓글쓰기 폼