이벤트 핸들러와 이벤트

Language/JAVASCRIPT 2010. 5. 10. 15:19

이벤트 핸들러

 

이벤트는 사용자의 어떤 행위(마우스를 클릭하거나 윈도우의 크기를 변경하거나 링크위로 마우스를 가져 가는 것등)에 의해 통상 발생한다. 이러한 행위가 발생할 때 실행될 자바스크립트를 지정하는 것이 이벤트 핸들러이다.

 

이벤트 핸들러의 형태

 

이벤트 핸들러의 형태는 이벤트의 앞에 on이 추가된 형태이다. 아래 표에서 첫 칸은 이벤트이고 둘째 칸은 이벤트 핸들러이다. 둘째 칸에는 모두 이벤트의 이름 앞에 on이 추가되어 있다는 것이 확인될 것이다.

 

 

 

event handler="①handlerText"
①handlerText: 자바스크립크 코드 또는 함수를 호출한다.

 

 

아래의 이벤트는 netscape와 explorer에서 공통적으로 적용되는 이벤트이다.

 

 

Event

Event handler

 

      

Click

onClick

클릭 이벤트가 발생(사용자가 마우스 버튼을 눌렀다 놓을 때)할 때 지정된 자바스크립트 코드를 실행하거나 또는 함수를 호출한다.

DblClick

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 이벤트가 발생한다. 이 이벤트는 키를 누르고 있는 동안 계속 반복적으로 발행한다.

 

'Language > JAVASCRIPT' 카테고리의 다른 글

window 개체  (0) 2010.05.10
onSelect | onkeypress  (0) 2010.05.10
onClick | onDblClick | onFocus | onBlur  (0) 2010.05.10
onMouseDown | onMouseUp | onMOuseOver | onMouseOut  (0) 2010.05.10
onMouseMove  (0) 2010.05.10
: