본문으로 바로가기

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에 추가된 속성으로 스크롤바가 스크롤될 때

댓글을 달아 주세요

티스토리 툴바