이벤트 핸들러
이벤트는 사용자의 어떤 행위(마우스를 클릭하거나 윈도우의 크기를 변경하거나 링크위로 마우스를 가져 가는 것등)에 의해 통상 발생한다. 이러한 행위가 발생할 때 실행될 자바스크립트를 지정하는 것이 이벤트 핸들러이다.
이벤트 핸들러의 형태
이벤트 핸들러의 형태는 이벤트의 앞에 on이 추가된 형태이다. 아래 표에서 첫 칸은 이벤트이고 둘째 칸은 이벤트 핸들러이다. 둘째 칸에는 모두 이벤트의 이름 앞에 on이 추가되어 있다는 것이 확인될 것이다.
event handler="①handlerText"
①handlerText: 자바스크립크 코드 또는 함수를 호출한다.
아래의 이벤트는 netscape와 explorer에서 공통적으로 적용되는 이벤트이다.
Event |
Event handler |
설 명 |
Click
|
onClick
|
클릭 이벤트가 발생(사용자가 마우스 버튼을 눌렀다 놓을 때)할 때 지정된 자바스크립트 코드를 실행하거나 또는 함수를 호출한다.
|
|
onDblClick
|
개체를 더블 클릭했을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
|
Blur
|
onBlur
|
blur 이벤트가 발생할 때 즉 개체가 초점을 읽을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 초점을 읽는다는 것은 초점이 어떤 개체에 주어 졌을 때 다른 개체를 클릭하거나 탭 키를 누름으로서 다른 개체로 초점이 이동할 때 기존 개체는 초점을 읽는다.
|
Focus
|
onFocus
|
focus 이벤트가 발생할 때 즉 개체가 초점을 얻을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 초점을 얻는다는 것은 어떤 개체가 focus 매써드에 의해 초점이 주어지거나 그 개체를 마우스로 클릭하거나 탭 키로 초점이 그 개체로 이동할 때 발생한다.
|
Abort
|
onAbort
|
abort 이벤트가 발생할 때 즉 사용자가 그림을 다운로드 중 브라우저에서 중지 버튼을 클릭했을 때 실행될 자바스크립트 코드나 함수를 호출한다.
|
Change
|
onChange
|
change 이벤트가 발생할 때 즉 개체가 초점을 읽고 그것의 value가 변경되었을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 사용자의 입력 값이 유효한 것인지 확인하기 위해 사용된다.
|
Load
|
onLoad
|
브라우저가 윈도우 또는 프레임을 읽어 들이는 것을 마쳤을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 프레임에 있는 onLoad 이벤트가 프레임셋에 있는 onLoad 이벤트보다 먼저 발생한다.
|
Unload
|
onUnload
|
사용자가 문서를 종료 시킬 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 프레임에 사용된 onUnload 이벤트가 프레임셋에 있는 onUnload 이벤트보다 먼저 발생한다.
|
MouseDown
|
onMouseDown
|
사용자가 마우스 버튼을 누를 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
|
MouseUp
|
onMouseUp
|
사용자가 마우스 버튼을 놓을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
|
MouseOver
|
onMouseOver
|
마우스 커서가 개체나 영역 밖에서부터 개체나 이미지 위에 위치할 때 지정된 자바스크립트 코드를 실행한다. onMouseOver와 함께 status 또는 default status 속성을 설정할 때에는 이벤트 핸들러 안에 true를return해야만 한다.
|
MouseOut
|
onMouseOut
|
마우스 커서가 링크나 이미지 맵의 영역을 떠 날 때 마다 지정된 자바스크립트 코드를 실행한다. onMouseOver와 함께 status 또는 default status 속성을 세팅할 때에는 이벤트 핸들러 안에 true를 return해야만 한다.
|
Reset
|
onReset
|
사용자가 폼에서 리셑 버튼을 클릭할 때 지정된 자바스크립트 코드를 실행한다. 이 이벤트 핸들러는 form 태그에서 사용함을 주의하라.
|
Submit
|
onSubmit
|
사용자가 폼을 제출할 때 지정된 자바스크립트 코드를 실행한다.
폼이 제출되는 것을 막기 위해 onSubmit 이벤트 핸들러를 사용할 수 있으며 이벤트 핸들러에 return 명령어(statement)를 놓아야 한다. 이 이벤트 핸들러는 form태그에 사용된다는 점에 주의하라.
|
Select
|
onSelect
|
사용자가 텍스트박스나 텍스트 필드의 텍스트를 선택할 때 지정된 자바 스크립트 코드를 실행한다.
|
MouseMove
|
onMouseMove
|
사용자가 마우스 커서를 이동 시킬 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. 마우스의 이동은 계속적으로 발생하는 것이기 때문에 어떤 개체의 이벤트가 아니다,
|
DragDrop
|
onDragDrop
|
사용자가 개체를 윈도우에 떨어뜨릴 때 지정된 자바스크립트 코드를 실행한다.
|
Error
|
onError
|
브라우저 자체의 에러가 아니라 그림이나 문서를 읽어들이는 동안 에러가 발생할 경우 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다.
|
Resize
|
onResize
|
사용자나 스크립트가 윈도우 또는 프레임의 크기를 변경할 때 지정된 자바스크립트 코드를 실행한다.
|
KeyDown
|
onKeyDown
|
사용자가 키를 누를 때 지정된 자바스크립트 코드를 실행한다.
KeyDown 이벤트는 KeyPress 이벤트 전에 발생한다, KeyDown이 false를 리턴하면, KeyPress이벤트는 발생하지 않는다.
|
KeyUp
|
onKeyUp
|
onKeyUp 이벤트 핸들러는 사용자가 눌렀던 키를 놓을 때 지정된 자바스크립트 코드를 실행한다.
|
KeyPress
|
onKeyPress
|
사용자가 키를 누르고 있을 때 지정된 자바스크립트 코드를 실행하거나 함수를 호출한다. keypress 이벤트는 keydown이벤트가 false 이외의 다른 것을 리턴할 때에만 keypress 이벤트가 발생한다. 이 이벤트는 키를 누르고 있는 동안 계속 반복적으로 발행한다. |