초기에 웹 환경, 정확히 말하자면, HTML에서는 이러한 것이 없었다. 그래서, 사용자의 입력에 반응하지 못함에 따라 웹 서버와 네트워크에 부하를 주었던 것이다. 그러한 문제 때문에 자바스크립트가 추가되면서 이러한 문제점을 줄여주었던 것이다.
자바스크립트를 HTML문장에 사용할 수 있게 되면서, 사용자의 행동에 따라 적절한 조치를 취할 수 있게 됨에 따라 HTML 문서의 내용만을 단순히 보여주는 브라우저환경을 벗어날 수 있게 된 것이다.
즉, 자바스크립트가 이벤트를 처리(Handle)하게 됨에 따라 HTML문서가 보다 동적인(Dynamic) 페이지가 될 수 있었다. 대부분 이벤트가 발생하면, 이 이벤트를 처리(Handle)할 수 있는 함수를 만들어서 해당 이벤트에 대응하게 하는데, 이렇게 이벤트와 처리함수를 묶어주는 것을 이벤트 핸들러(Event Handler)라고 부른다.
다음은 이벤트의 종류와 그에 대한 설명이다.
| 이벤트명 | 발생대상 | 설 명 |
| Abort | image | 이미지를 로딩하다가 멈추었을 때 |
| Blur | window, form element | 입력 포커스가 이동할 때 |
| Change | text, textarea, select | 내용이 변경되었을 때 |
| Click | button, radio, checkbox, submit, reset | 마우스가 눌렸을 때 |
| DblClick | button, radio, checkbox, submit, reset | 마우스가 두번눌렸을 때 |
| DragDrop | window | 마우스를 누른 상태로 움직였을 때 |
| Error | image, window | 문서나 이미지를 로딩하다 멈췄을 때 |
| Focus | window, form element | 입력 포커스를 받았을 때 |
| KeyDown | document, image, link, text | 키보드로 값을 입력했을 때 |
| KeyPress | document, image, link, text | 키보드가 눌렸을 때 |
| KeyUp | document, image, link, text | 키보드가 눌렸다 놓았을 때 |
| Load | document | 문서를 로딩을 완료했을 때 |
| MouseDown | document, button, link | 마우스가 눌렸을 때 |
| MouseMove | all | 마우스가 움직일 때 |
| MouseOut | image map, link | 마우스가 빠져나갈 때 |
| MouseOver | link | 마우스 포인터가 올라왔을 때 |
| MouseUp | document, button, link | 마우스를 눌렀다 놓았을 때 |
| Move | window | 브라우저를 이동시킬 때 |
| Reset | form | form 태그 중 reset버튼을 눌렀을 때 |
| Resize | window | 브라우저의 사이즈를 변경할 때 |
| Select | text, textarea | 입력창을 선택했을 때 |
| Submit | form | form값을 전송할 때 |
| Unload | document | 브라우저가 현재 문서에서 빠져나갈 때 |
위의 이벤트는 앞에서 말한 대로 사용자가 발생을 시킨다. 그럼 그 이벤트에 해당하는 함수를 어떻게 대응시키는가 배워야 하겠다. 즉, 이벤트 핸들러를 사용하는 방법부터 알아보자.일반적으로 이벤트 핸들러는 이벤트명 앞에 단순히 on을 붙이면 된다. 즉, Click 이벤트를 잡아내고 싶으면 onClick이라고 하면 Click이벤트 핸들러가 되는 것이다. 이벤트는 특정한 HTML요소 즉, HTML Tag에서 발생되는 것이기 때문에 다음과 같이 표기한다.
<TAG eventHandler="처리할 실제함수명();">
실제 예로, 간단히 Form Tag중에 Button을 예로 들면,
<INPUT TYPE="button" VALUE="Click Me" onClick="func();">
와 같이 사용하면 된다. 이렇게 이벤트 핸들러에는 함수나 다른 자바스크립트 코드가 올 수 도 있다. 자바스크립트 코드가 여러 개 올 경우에는 반드시 세미콜론(;)을 넣어주어야 하지만, 위의 예처럼 하나의 문장인 경우는 세미콜론을 생략할 수도 있다.
하나의 HTML 요소에 여러개의 이벤트 핸들러를 지정할 수도 있다.
하나의 HTML 요소에 여러개의 이벤트 핸들러를 지정할 수도 있다.
<TAG onClick="alert('Click')" onFocus="alert('Focus')">
|
HTML 태그
|
JavaScript
이벤트
|
설명
|
|
다양
|
mouseMove
|
마우스 이동
|
|
<A>..</A>
|
Click
|
마우스로 링크를 클릭
|
|
dbClick
|
마우스를 링크위에서 더블클릭
|
|
|
mouseDown
|
마우스 버튼을 누름
|
|
|
mouseUp
|
마우스 버튼을 놓음
|
|
|
mouseOver
|
마우스를 링크위로 이동
|
|
|
mouseOut
|
링크 위에 있던 마우스를
링크 밖으로
이동
|
|
|
keyDown
|
사용자가 키를 누름
|
|
|
keyUp
|
사용자가 키를 놓음
|
|
|
keyPress
|
사용자가 키를 눌렀다가 놓음
|
|
|
<IMG>
|
abort
|
사용자 액션으로 인해 이미지
로딩 작업을
중단함
|
|
error
|
이미지 로딩하는 동안 에러 발생
|
|
|
load
|
이미지가 로드되고 화면에
나타남
|
|
|
keyDown
|
사용자가 키를 누름
|
|
|
keyUp
|
사용자가 키를 놓음
|
|
|
keyPress
|
사용자가 키를 눌렀다가 놓음
|
|
|
<AREA>
|
mouseOver
|
마우스가 클라이언트측
이미지맵의 한
영역으로 이동함
|
|
mouseOut
|
마우스가 이미지맵 영역
밖으로 이동
|
|
|
dbClick
|
사용자가 이미지맵의 한
영역을 더블클릭함
|
|
|
<BODY>..</BODY>
|
Click
|
사용자가 문서의 본문을 클릭
|
|
dbClick
|
문서의 본문을 더블 클릭함
|
|
|
keyDown
|
키를 누름
|
|
|
keyUp
|
키를 놓음
|
|
|
keyPress
|
키를 눌렀다가 놓음
|
|
|
mouseDown
|
마우스 버튼을 누름
|
|
|
mouseUp
|
마우스 버튼을 놓음
|
|
|
<BODY>..</BODY>
<FRAMESET>..</FRAMESET> <FRAME>..</FRAME> |
blur
|
윈도우에서 현재 입력 포커스가 사라짐
|
|
error
|
윈도우가 로드되는 동안 에러 발생
|
|
|
focus
|
입력 포커스가 현재 윈도우로 이동
|
|
|
load
|
윈도우 로딩이 완료됨
|
|
|
unload
|
윈도우를 종료함
|
|
|
move
|
윈도우가 이동됨
|
|
|
resize
|
윈도우의 크기가 바뀜
|
|
|
dragDrop
|
윈도우에 객체를 드롭
|
|
|
<FORM>..</FORM>
|
submit
|
사용자가 폼을 제출
|
|
reset
|
사용자가 폼을 재설정
|
|
|
<INPUT TYPE="text">
|
blur
|
현재 입력 포커스가
텍스트 필드에서
사라짐
|
|
focus
|
현재 입력 포커스가
텍스트 필드로 이동
|
|
|
change
|
텍스트 필드가 변경되어
현재 입력 포커스가
사라짐
|
|
|
select
|
텍스트 필드에 있는
텍스트가 선택됨
|
|
|
<INPUT TYPE="password">
|
blur
|
패스워드 필드에서
입력 포커스가 사라짐
|
|
focus
|
패스워드 필드에
입력 포커스 생김
|
|
|
<TEXTAREA>..</TEXTAREA>
|
blur
|
텍스트 영역이 현재
입력 포커스가 사람짐
|
|
focus
|
텍스트 영역에 입력 포커스 생김
|
|
|
change
|
텍스트 영역이 변경되어
입력 포커스가
사라짐
|
|
|
select
|
텍스트 영역에서 텍스트가
선택됨
|
|
|
keyDown
|
키를 누름
|
|
|
keyUp
|
키를 놓음
|
|
|
keyPress
|
키를 눌렀다 놓음
|
|
|
<INPUT TYPE="button">
|
Click
|
버튼이 클릭됨
|
|
blur
|
입력할 수 없도록 버튼이 흐려짐
|
|
|
focus
|
입력할 수 있도록 포커스 생김
|
|
|
mouseDown
|
버튼 위에서
왼쪽 마우스 버튼 누름
|
|
|
mouseUp
|
버튼 위에서
왼쪽 마우스 버튼 놓음
|
|
|
<INPUT TYPE="submit">
|
Click
|
제출 버튼이 클릭됨
|
|
blur
|
제출 버튼에서
입력 포커스가 사라짐
|
|
|
focus
|
제출 버튼에 입력 포커스 생김
|
|
|
<INPUT TYPE="reset">
|
Click
|
리셋 버튼이 클릭됨
|
|
blur
|
리셋 버튼에서 포커스가 사라짐
|
|
|
focus
|
리셋 버튼에서 포터스가 놓임
|
|
|
<INPUT TYPE="radio">
|
Click
|
라디오 버튼이 클릭
|
|
blur
|
라디오 버튼에서
입력 포커스가 사라짐
|
|
|
focus
|
라디오 버튼에 입력 포커스 생김
|
|
|
<INPUT TYPE="checkbox">
|
Click
|
체크 박스가 클릭
|
|
blur
|
체크 박스에서
입력 포커스가 사라짐
|
|
|
focus
|
체크 박스에 입력 포커스 놓임
|
|
|
<INPUT TYPE="file">
|
blur
|
파일 업로드 폼 요소에서
입력 포커스
사라짐
|
|
change
|
사용자가 업로드될 파일을 선택
|
|
|
focus
|
파일 업로드 폼 요소에
입력 포커스
놓임
|
|
|
<SELECT>..</SELECT>
|
blur
|
선택 요소가 현재
입력 포커스 잃음
|
|
change
|
선택 요소가 변경되어
입력 포커스가
사라짐
|
|
|
focus
|
선택 요소에 현재
입력 포커스가 놓임
|
|
이벤트핸들링속성
|
실행되는 상황
|
|
onAbort
|
이미지를 로딩하는 작업이 사용자의
한 행동으로 인해 취소되었음
|
|
onBlur
|
문서나 윈도우, 프레임세트,
폼 요소에서 현재 입력 포커스가 사라짐
|
|
onChange
|
텍스트 필드나 텍스트 영역, 파일
업로드 필드, 선택 항목이 변경되어 현재 입력 포커스가 사라짐
|
|
onClick
|
링크나 클라이언트측 이미지맵 영역,
폼
요소가 클릭됨
|
|
onDbClick
|
링크나 클라이언트측 이미지맵 영역,
문서가
더블 클릭됨
|
|
onDragDrop
|
드래그된 객체가 윈도우나 프레임에 드롭됨
|
|
onError
|
이미지나 윈도우, 프레임을 로딩하는 동안
에러가 발생함
|
|
onFocus
|
문서나 윈도우, 프레임 세트,
폼 요소에 입력 포커스 놓임
|
|
onKeyDown
|
키를 누름
|
|
onKeyPress
|
키를 눌렀다 놓음
|
|
onKeyUp
|
키를 놓음
|
|
onLoad
|
이미지나 문서, 프레임이 로드됨
|
|
onMouseDown
|
마우스 버튼 누름
|
|
onMouseMove
|
마우스를 이동함
|
|
onMouseOut
|
링크나 클라이언트측 이미지맵에서
마우스를
옮김
|
|
onMouseOver
|
마우스를 링크나
클라이언트측 이미지맵으로
옮김
|
|
onMouseUp
|
마우스 버튼을 놓음
|
|
onMove
|
사용자가 윈도우나 프레임을 이동함
|
|
onReset
|
폼의 리셋 버튼을 클릭하여 폼을 리셋시킴
|
|
onResize
|
사용자가 윈도우나 프레임의 크기를 조절
|
|
onSelect
|
텍스트는 텍스트 필드나 영역에서 선택됨
|
|
onSubmit
|
폼이 제출됨
|
|
onUnload
|
사용자가 문서나 프레임 세트를 종료함
|
댓글 없음:
댓글 쓰기