자바스크립트 이벤트 핸들러
브라우져에서 사용자나 스크립트가 페이지를 불러오는 경우, 또는 객체(오브젝트)를 클릭하는 등 특정한 동작이 일어나는 순간을 이벤트라고 한다.
자바스크립트에서는 이벤트가 발생하면 이관 관련된 스크립트가 지정된 경우 스크립트를 실행한다. 이렇게 이벤트를 판단하는 것을 이벤트 핸들러라고 하고 이벤트 핸들러의 설정은 그 이벤트 핸들러를 설정할 수 있는 오브젝트의 HTML 태그 안에서 지정함으로써 실행하게 된다.
[1] 이벤트가 발생한곳의 위치를 보여주는 예제 <html>
<head>
<script language = "javascript">
<!--
function eval(){
alert("이벤트" + window.event.type + "가 발생했습니다." + "\n" + /* 익스플로러는 event object를 직접
"스크린 X좌표: " + window.event.screenX + "\n" + 지원되지 않고 event object가 window
"스크린 Y좌표: " + window.event.screenY + "\n" + object의 property 이므로
.....
[2] Reset 사용자 또는 스크립트에 의해 창 또는 프레임의 크기가 변경되었을 때의 이벤트를 판단

type
"Reset"을 값으로 가짐

width, height
창 또는 프레임의 너비와 높이를 값으로 가짐

[3] Move 사용자 또는 스크립트에 의해 창 또는 프레임이 움직였을 때의 이벤트를 판단

type
"Move"를 값으로 가짐

screenX, screenY
창 또는 프레임의 왼쪽 상단 모서리 위치를 값으로 가짐

[4] MouseUp 사용자가 마우스 버튼 누름을 해제했을 때의 이벤트를 판단

type
"MouseUp"을 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

which
왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 가짐

modifiers
이벤트가 발생했을 때 눌러진 수식 key의 값을 가짐

[5] MouseOver 오브젝트에 커서가 올라갔을 때의 이벤트를 판단

type
"MouseOver"를 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

[6] MouseMove 커서가 움직였을 때의 이벤트를 판단, "captureEvent()" 메소드에서 이 이벤트를 판단하도록 설정하고 있을 때에만 유효

type
"MouseMove"를 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

[7] MouseDown 사용자가 마우스 버튼을 눌렀을 때의 이벤트를 판단

type
"MouseDown"을 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

which
왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 가짐

modifiers
이벤트가 발생했을 때 눌러진 수식 key의 값을 가짐

[8] KeyUp 사용자가 key 선택을 해제했을 때의 이벤트를 판단

type
"KeyUp"을 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

which
선택해제된 key의 ASCII 값을 가짐

modifiers
수식 key의 값을 가짐

[9] KeyPress 사용자가 key를 누른 상태로 있을 때의 이벤트를 판단, "KeyDown" 이벤트가 참을 반환했을 때만 이벤트가 발생

type
"KeyPress"를 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

which
눌려진 key의 ASCII 값을 가짐

modifiers
수식 key의 값을 가짐

[10] KeyDown 사용자가 key를 눌렀을 때의 이벤트를 판단, "KeyPress" 이벤트보다 앞서 발생하고 만일 "KeyDown" 이벤트가 거짓을 반환했을 때에는 "KeyPress" 이벤트는 발생하지 않음

type
"KeyDown"을 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

which
눌려진 key의 ASCII 값을 가짐

modifiers
수식 key의 값을 가짐

[11] DragDrop 창위에 파일이나 단축키등을 drag and drop 했을 때에 이벤트를 판단, 이벤트가 발생했을 때 참을 반환하면 drag and drop을 하게 하고 거짓을 반환하면 중지

type
: "DragDrop"을 값으로 가짐

data
: drop된 파일의 URL을 반환

[12] Dbclick 마우스를 더블클릭 했을 때의 이벤트를 판단

type
: "Dbclick"을 값으로 가짐

layerX, layerY,
pageX, pageY,
screenX, screenY
: 이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐

which
: 왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 가짐

modifiers
: 수식 key의 값을 가짐

[13] Click 마우스를 클릭했을 때의 이벤트를 판단, "mousedown" 이벤트와 "mouseup" 이벤트를 합한것

type: "click"

layerX, layerY,
pageX, pageY,
screenX, screenY
: 이벤트가 발생했을 때 커서의 X, Y축 위치를 값을 반환

which
: 왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 반환

modifiers
: 수식 key의 값을 반환

[14] 이벤트 예제 소스 <html>
<head>
</head>
<body>
<form name = "EVENT">
<input type = "button" name = "event" value = "onClick Event!!" onClick = "alert('이벤트타입: ' +event.type)">
</form>
<a href = "#" onMouseOut = "alert('이벤트타입: ' + event.type)"> onMouseOut Event!</a>
// 객체위에 있는 마우스 커서가 벗어났을 때 이벤트 발생
<p>
<a href = "#" onMouseDown = "alert('이벤트타입: ' + event.t .....
[15] onUnload 다른 페이지로 이동했을 때의 이벤트를 판단하는 이벤트 핸들러, 현재 페이지를 열거나 다른 페이지로 이동했을 때를 이벤트로 판단하고 설정한 처리를 실행
    [1] [2]    
Javascript Source List :