10_이벤트와 이벤트 처리
이벤트 구동 프로그램
이벤트를 감지하고 이벤트 발생 시 그에 대한 이벤트를 처리하는 프로그램을 말합니다.
이벤트 처리기
1) onclick
: 클릭 이벤트 처리기
2) ondblclick
: 더블클릭 이벤트 처리기
3) onfocus
: 포커스를 얻을 때 이벤트 처리기
4) onblur
: 포커스를 잃을 때 이벤트 처리기
5) onmousedown
: 마우스 버튼을 눌렀을 때 이벤트 처리기
6) onmouseup
: 마우스 버튼을 떼었을 때 이벤트 처리기
7) onmousemove
: 마우스를 움직였을 때 발생하는 이벤트
8) onmouseout
: 마우스를 요소(element)밖으로 움직였을 때 이벤트 처리기
9) onmouseover
: 마우스를 요소(element)위로 움직였을 때 이벤트 처리기
10) onkeydown, onkeypress
: 키보드 버튼을 눌렀을 때 이벤트 처리기
11) onkeyup
: 눌렀던 키보드를 떼어 냈을 때 이벤트 처리기
12) load
: 웹 브라우저에 문서가 모두 loading 되었을 때 이벤트 처리기
13) unload
: 해당 페이지를 빠져 나갈 때 이벤트 처리기
14) onchange
: 사용자의 입력이 변경되었을 때 이벤트 처리기
15) onselect
: 텍스트가 선택되었을 때 이벤트 처리기
16) onresize
: 창 크기가 변경되었을 때 이벤트 처리기
17) onsubmit
: 폼을 제출할 때 이벤트 처리기
18) onreset
: 폼을 초기화할 때 이벤트 처리기
19) onabort
: 이미지 로딩이 중단될 때 이벤트 처리기
20) onerror
: 이미지 로딩 시 에러 이벤트 처리기
실습예제
예제 10-1.html
onchange 이벤트처리기에 대한 예제입니다.
<html>
<body> 정답은 몇 번입니까?
<select name="answer" onchange="alert('답이 변경됩니다');">
<option value="1" selected>1번</option>
<option value="2">2번</option>
<option value="3">3번</option>
<option value="4">4번</option>
</select>
</body>
</html>
예제 10-2.html
onclick 이벤트처리기에 대한 예제입니다.
<html>
<input type="button" name="add" value="클릭!" onclick="alert('클릭 이벤트');"/>
</html>
예제 10-3.html
onload 이벤트 처리기에 대한 예제입니다.
<html>
<body onload="alert('페이지 로드 완료 이벤트');">
</body>
</html>
