|
자바스크립트 이벤트 핸들러 |
브라우져에서 사용자나 스크립트가 페이지를 불러오는 경우, 또는 객체(오브젝트)를 클릭하는 등 특정한 동작이 일어나는 순간을 이벤트라고 한다. 자바스크립트에서는 이벤트가 발생하면 이관 관련된 스크립트가 지정된 경우 스크립트를 실행한다. 이렇게 이벤트를 판단하는 것을 이벤트 핸들러라고 하고 이벤트 핸들러의 설정은 그 이벤트 핸들러를 설정할 수 있는 오브젝트의 HTML 태그 안에서 지정함으로써 실행하게 된다. |
이벤트가 발생한곳의 위치를 보여주는 예제 (1) 11/24/2004 sima
<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 이므로
창의 X좌표: + window.event.pageX + \n + window.event.property 형태로 이벤트
창의 Y좌표: + window.event.pageY) 정보를 습득 */
return true
}
document.onmousedown = eval // 마우스 버튼을 누르면 eval() 함수가 호출되어 alert를 실행l
//-->
</script>
</head>
<body>
<p>mousedown 이벤트가 발생했습니다.</p>
</body>
</html>
|
|
Reset (0) 11/24/2004 sima
사용자 또는 스크립트에 의해 창 또는 프레임의 크기가 변경되었을 때의 이벤트를 판단
type
Reset을 값으로 가짐
width, height
창 또는 프레임의 너비와 높이를 값으로 가짐
|
|
Move (0) 11/24/2004 sima
사용자 또는 스크립트에 의해 창 또는 프레임이 움직였을 때의 이벤트를 판단
type
Move를 값으로 가짐
screenX, screenY
창 또는 프레임의 왼쪽 상단 모서리 위치를 값으로 가짐
|
|
MouseUp (0) 11/24/2004 sima
사용자가 마우스 버튼 누름을 해제했을 때의 이벤트를 판단
type
MouseUp을 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
which
왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 가짐
modifiers
이벤트가 발생했을 때 눌러진 수식 key의 값을 가짐
|
|
MouseOver (0) 11/24/2004 sima
오브젝트에 커서가 올라갔을 때의 이벤트를 판단
type
MouseOver를 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
|
|
MouseMove (0) 11/24/2004 sima
커서가 움직였을 때의 이벤트를 판단, captureEvent() 메소드에서 이 이벤트를 판단하도록 설정하고 있을 때에만 유효
type
MouseMove를 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
|
|
MouseDown (0) 11/24/2004 sima
사용자가 마우스 버튼을 눌렀을 때의 이벤트를 판단
type
MouseDown을 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
which
왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 가짐
modifiers
이벤트가 발생했을 때 눌러진 수식 key의 값을 가짐
|
|
KeyUp (0) 11/24/2004 sima
사용자가 key 선택을 해제했을 때의 이벤트를 판단
type
KeyUp을 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
which
선택해제된 key의 ASCII 값을 가짐
modifiers
수식 key의 값을 가짐
|
|
KeyPress (0) 11/24/2004 sima
사용자가 key를 누른 상태로 있을 때의 이벤트를 판단, KeyDown 이벤트가 참을 반환했을 때만 이벤트가 발생
type
KeyPress를 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
which
눌려진 key의 ASCII 값을 가짐
modifiers
수식 key의 값을 가짐
|
|
KeyDown (0) 11/24/2004 sima
사용자가 key를 눌렀을 때의 이벤트를 판단, KeyPress 이벤트보다 앞서 발생하고 만일 KeyDown 이벤트가 거짓을 반환했을 때에는 KeyPress 이벤트는 발생하지 않음
type
KeyDown을 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
which
눌려진 key의 ASCII 값을 가짐
modifiers
수식 key의 값을 가짐
|
|
DragDrop (0) 11/24/2004 sima
창위에 파일이나 단축키등을 drag and drop 했을 때에 이벤트를 판단, 이벤트가 발생했을 때 참을 반환하면 drag and drop을 하게 하고 거짓을 반환하면 중지
type
: DragDrop을 값으로 가짐
data
: drop된 파일의 URL을 반환
|
|
Dbclick (0) 11/24/2004 sima
마우스를 더블클릭 했을 때의 이벤트를 판단
type
: Dbclick을 값으로 가짐
layerX, layerY,
pageX, pageY,
screenX, screenY
: 이벤트가 발생했을 때 커서의 X, Y축 위치를 값으로 가짐
which
: 왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 가짐
modifiers
: 수식 key의 값을 가짐
|
|
Click (0) 11/24/2004 sima
마우스를 클릭했을 때의 이벤트를 판단, mousedown 이벤트와 mouseup 이벤트를 합한것
type: click
layerX, layerY,
pageX, pageY,
screenX, screenY
: 이벤트가 발생했을 때 커서의 X, Y축 위치를 값을 반환
which
: 왼쪽 버튼일 때는 1을, 오른쪽 버튼일 때는 3을 반환
modifiers
: 수식 key의 값을 반환
|
|
이벤트 예제 소스 (0) 11/24/2004 sima
<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.type)> onMouseDown Event!</a>
// 마우스의 버튼을 누렀을 때 이벤트 발생
<p>
<a href = # onMouseUp = alert(이벤트타입: + event.type)> onMouseUp Event!</a>
// 마우스 버튼을 누른 다음 떼었을 때 이벤트 발생
<p>
<a href = # onMouseOver = alert(이벤트타입: + event.type)> onMouseOver Event!</a>
// 객체위에 마우스 커서가 위치했을 때 이벤트 발생
</body>
</html>
|
|
onUnload (0) 11/24/2004 sima
다른 페이지로 이동했을 때의 이벤트를 판단하는 이벤트 핸들러, 현재 페이지를 열거나 다른 페이지로 이동했을 때를 이벤트로 판단하고 설정한 처리를 실행
| |
onSubmit (0) 11/24/2004 sima
폼의 submit 버튼이 눌렸을 때의 이벤트를 판단하는 이벤트 핸들러, submit 버튼을 눌러서 폼 안의 데이터를 보내기 시작했을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onSelect (0) 11/24/2004 sima
폼의 텍스트 영역이 선택되었을 때의 이벤트를 판단하는 이벤트 핸들러, text폼이나 textarea폼이 선택되어 폼안에 입력이 가능해졌을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onReset (0) 11/24/2004 sima
폼이 reset 되었을 때의 이벤트를 판단하는 이벤트 핸들러, reset폼을 누르는 등 폼내용이 reset 되었을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onMouseOver (0) 11/24/2004 sima
마우스가 지정영역 안으로 들어갔을 때의 이벤트를 판단하는 이벤트 핸들러, 링크설정에 의해서 마우스 포인터가 링크위에 올라갔을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onMouseOut (0) 11/24/2004 sima
마우스가 지정된 영역에서 떨어졌을 때의 이벤트를 판단하는 이벤트 핸들러, 링크설정에 의해서 마우스 포인터가 링크에서 떨어졌을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onLoad (0) 11/24/2004 sima
페이지나 그림이 로드되었을 때의 이벤트를 판단하는 이벤트 핸들러, 페이지나 그림 로드가 종료되었을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onFocus (0) 11/24/2004 sima
포커스가 폼이나 창에 주어졌을 때의 이벤트를 판단하는 이벤트 핸들러, 폼을 이동하거나 포커스가 있는 창을 클릭했을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onError (0) 11/24/2004 sima
페이지나 그림 로드시 에러가 발생했을 때의 이벤트를 판단하는 이벤트 핸들러, 링크가 끊어지는 것과 그림 불러오기가 잘 실행되지 않는 등의 경우가 발생했을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onClick (0) 11/24/2004 sima
버튼이나 링크를 클릭했을 때의 이벤트를 판단하는 이벤트 핸들러, button폼이나 링크를 클릭했을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onChange (0) 11/24/2004 sima
폼 내용에 변화가 있고 포커스가 폼에서 사라졌을 때의 이벤트를 실행하는 이벤트 핸들러, text폼의 내용을 변경하고 다른 폼으로 이동하는 등 포커스가 이동했을 때를 이벤트로 판단하고 설정한 처리를 실행
|
|
onBlur (0) 11/24/2004 sima
포커스가 창이나 프레임으로부터 이동해 나갔을 때의 이벤트를 판단하는 이벤트 핸들러, text폼에서 마우스 커서가 깜박거리거나 라디오 폼이나 체크박스 폼이 체크되어 있는 상태 그리고 창이 활성화되어 있는 상태가 포커스가 있는 상태인데 폼을 이동하거나 포커스가 있는 창이 아닌 다른 창을 클릭해서 포커스가 이동했을 때를 이벤트로 취득하고 설정한 처리를 실행
|
|
onAbort (0) 11/24/2004 sima
이미지 화일의 로드가 취소되었을 때의 이벤트를 실행하는 이벤트 핸들러,
그림을 불러오는 도중에 브라우저의 멈춤버튼을 누르는 등의 동작으로 화상의 로드가 취소되었을 때를 이벤트로 판단하고 설정한 처리를 실행하게된다.
| | 출처 : 해피스크립트 |
