HTML 이벤트 참조 가이드

전역 이벤트 속성

HTML은 사용자가 요소를 클릭할 때 JavaScript를 시작하는 것과 같은 액션을 유발할 수 있는 능력을 가지고 있습니다.

프로그래밍 이벤트에 대한更多信息를 알고 싶다면, 우리의 JavaScript 강의

HTML 요소에 이벤트 작업을 정의하기 위해 추가할 수 있는 전역 이벤트 속성입니다.

Window 이벤트 속성

window 객체에 대한 이벤트(<body> 태그에 적용됨):

속성 값 설명
onafterprint script 문서가 인쇄된 후에 실행되는 스크립트.
onbeforeprint script 문서가 인쇄되기 전에 실행되는 스크립트.
onbeforeunload script 문서가 다운로드되기 전에 실행되는 스크립트.
onerror script 에러가 발생할 때 실행되는 스크립트.
onhaschange script 문서가 변경되면 실행되는 스크립트.
onload script 페이지가 로드되면 발생하는 이벤트.
onmessage script 메시지가 유발될 때 실행되는 스크립트.
onoffline script 문서가 오프라인이 되면 실행되는 스크립트.
ononline script 문서가 온라인이 되면 실행되는 스크립트.
onpagehide script 윈도우가 숨겨지면 실행되는 스크립트.
onpageshow script 윈도우가 보이게 되면 실행되는 스크립트.
onpopstate script 윈도우 이력 기록이 변경될 때 실행되는 스크립트.
onredo script 문서가 되돌리기(redo) 실행될 때 실행되는 스크립트.
onresize script 브라우저 창 크기를 조정할 때 발생하는 이벤트.
onstorage script Web Storage 영역이 업데이트된 후 실행되는 스크립트.
onundo script 문서가 되돌리기 실행될 때 실행되는 스크립트.
onunload script 페이지가 다운로드되면(또는 브라우저 창이 닫혀지면) 발생하는 이벤트.

Form 이벤트

HTML 표单 내의 동작으로 유발된 이벤트(几乎所有 HTML 요소에 적용됨, 하지만 가장 많이 form 요소에 사용됨):

속성 값 설명
onblur script 요소가 포커스를 잃을 때 실행되는 스크립트.
onchange script 요소의 값이 변경될 때 실행되는 스크립트.
oncontextmenu script 컨텍스트 메뉴가 트리거될 때 실행되는 스크립트.
onfocus script 요소가 포커스를 받을 때 실행되는 스크립트.
onformchange script 폼이 변경될 때 실행되는 스크립트.
onforminput script 폼이 사용자 입력을 받을 때 실행되는 스크립트.
oninput script 요소가 사용자 입력을 받을 때 실행되는 스크립트.
oninvalid script 요소가 무효일 때 실행되는 스크립트.
onreset script 폼에서 리셋 버튼이 클릭될 때 트리거되는 이벤트. HTML5에서는 지원되지 않음.
onselect script 요소의 텍스트가 선택된 후 트리거되는 이벤트.
onsubmit script 폼을 제출할 때 트리거되는 이벤트.

키보드 이벤트

속성 값 설명
onkeydown script 사용자가 키를 누를 때 트리거되는 이벤트.
onkeypress script 사용자가 버튼을 누를 때 트리거되는 이벤트.
onkeyup script 사용자가 키를 떼 때 트리거되는 이벤트.

마우스 이벤트

마우스나 유사한 사용자 행동으로 트리거된 이벤트:

속성 값 설명
onclick script 요소에서 마우스 클릭이 발생할 때 트리거되는 이벤트.
ondblclick script 요소에서 마우스 더블 클릭이 발생할 때 트리거되는 이벤트.
ondrag script 요소가 드래그 될 때 실행되는 스크립트.
ondragend script 드래그 앤 드롭 작업이 끝날 때 실행되는 스크립트.
ondragenter script 요소가 유효한 드래그 앤 드롭 영역에 드래그 되었을 때 실행되는 스크립트.
ondragleave script 요소가 유효한 드래그 앤 드롭 대상에서 벗어날 때 실행되는 스크립트.
ondragover script 요소가 유효한 드래그 앤 드롭 대상 위에서 드래그 되고 있을 때 실행되는 스크립트.
ondragstart script 드래그 앤 드롭 작업이 시작될 때 실행되는 스크립트.
ondrop script 이동 중인 요소가 드래그 앤 드롭될 때 실행되는 스크립트.
onmousedown script 요소에서 마우스 버튼을 누를 때 트리거되는 이벤트.
onmousemove script 마우스 포인터가 요소에 오를 때 트리거되는 이벤트.
onmouseout script 마우스 포인터가 요소에서 벗어날 때 트리거되는 이벤트.
onmouseover script 마우스 포인터가 요소에 오를 때 트리거되는 이벤트.
onmouseup script 요소에서 마우스 버튼을 떼 때 트리거되는 이벤트.
onmousewheel script 마우스 휠이 스크롤될 때 실행되는 스크립트.
onscroll script 요소의 스크롤바가 스크롤될 때 실행되는 스크립트.

미디어 이벤트

메ディ어(예: 비디오, 이미지, 오디오)로 트리거된 이벤트(모든 HTML 요소에 적용되지만, 보통 메디어 요소에서 흔히 사용되는 <audio>, <embed>, <img>, <object> 및 <video>와 같은 요소에서 많이 사용됨):

속성 값 설명
onabort script 끝나고 있을 때 실행되는 스크립트입니다.
oncanplay script 파일이 재생을 시작할 준비가 되었을 때(버퍼링이 충분하면) 실행되는 스크립트입니다.
oncanplaythrough script 미디어가 버퍼링 없이 끝까지 재생할 수 있을 때 실행되는 스크립트입니다.
ondurationchange script 미디어 길이가 변경될 때 실행되는 스크립트입니다.
onemptied script 파일이 갑자기 사용할 수 없게 되었을 때(예: 연결이 갑자기 끊어졌을 때) 실행되는 스크립트입니다.
onended script 미디어가 끝에 도달했을 때 실행되는 스크립트(예: 감사합니다 같은 메시지를 보낼 수 있습니다).
onerror script 파일 로드 중에 오류가 발생했을 때 실행되는 스크립트입니다.
onloadeddata script 미디어 데이터가 로드되었을 때 실행되는 스크립트입니다.
onloadedmetadata script 메타데이터(예: 해상도와 길이)가 로드될 때 실행되는 스크립트입니다.
onloadstart script 파일이 시작된 후 실제로 데이터를 로드하지 않은 상태에서 실행되는 스크립트입니다.
onpause script 미디어가 사용자나 프로그램에 의해 일시정지될 때 실행되는 스크립트입니다.
onplay script 미디어가 재생을 시작할 준비가 되었을 때 실행되는 스크립트입니다.
onplaying script 미디어가 재생을 시작했을 때 실행되는 스크립트입니다.
onprogress script 브라우저가 미디어 데이터를 가져오고 있는 동안 실행되는 스크립트입니다.
onratechange script 재생 속도가 변경될 때마다 실행되는 스크립트(사용자가 슬로우모션 또는 재생 속도를 가속화할 때).
onreadystatechange script 준비 상태가 변경될 때마다 실행되는 스크립트(준비 상태는 미디어 데이터의 상태를 모니터링합니다).
onseeked script seeking 속성이 false로 설정되었을 때(위치이 종료된 것을 나타냅니다) 실행되는 스크립트입니다.
onseeking script seeking 속성이 true로 설정되었을 때(위치이 활성화되는 것을 나타냅니다) 실행되는 스크립트입니다.
onstalled script 브라우저가 어떤 이유로든 미디어 데이터를 가져오지 못했을 때 실행되는 스크립트입니다.
onsuspend script 미디어 데이터가 완전히 로드되기 전에 어떤 이유로든 중지되었을 때 실행되는 스크립트입니다.
ontimeupdate script 재생 위치가 변경될 때마다(사용자가 미디어 중 다른 위치로 빠르게 이동했을 때) 실행되는 스크립트입니다.
onvolumechange script 음량이 변경될 때마다(음량을 무소리로 설정하는 것도 포함) 실행되는 스크립트입니다.
onwaiting script 미디어가 재생을 중지했지만 계속 재생할 의도가 있을 때(예: 미디어가 추가 데이터를缓冲하려고 일시정지됐을 때) 스크립트가 실행됩니다