이벤트란?
이벤트란 컴퓨터와 작업자 사이에 발생하는 일종의 메시지이다.
가. 이벤트 발생 이유
작업의 시작과 끝을 알리거나 컴퓨터나 작업자가 알아야할 내용이 발생할 때 이를 전달하기 위해 이벤트를 발생 시킨다. 이때 인터럽트란 것에 의해 처리 과정에 있던 일들이 잠시 중단될 수 있다.
나. 이벤트와 이벤트 핸들러
이벤트를 컴퓨터와 작업자 사이에 주고 받는 메시지라 하면 이벤트 핸들러는 이 메시지를 감지하는 함수라 볼수 있다. 하나의 이벤트 핸들러는 하나의 이벤트와 연결되어 있다.
다. 이벤트 객체
브라우저 마다 약간씩의 차이는 있으나 아래와 같은 방법으로 이벤트를 핸들링 할 수 있다.
function test(event){
ev = event || window.event;
}
이벤트와 관련된 정보
| altKey | alt 키를 눌렀을 때 발생 합니다. |
| altLeft | 왼쪽 alt키를 눌렀을 때 발생 합니다. |
| button | 마우스 버튼을 눌렀을 때 발생 합니다. (1=왼쪽, 2=오른쪽, 3=양쪽) |
| clientX | 윈도우에서 실제 데이터 영역을 기준으로 마우스의 x좌표의 위치를 알려줍니다. |
| clientY | 윈도우에서 실제 데이터 영역을 기준으로 마우스의 y좌표의 위치를 알려줍니다. |
| ctrlKey | ctrl키를 눌렀을 때 발생 합니다. |
| ctrlLeft | 왼쪽 ctrl키를 눌렀을 때 발생 합니다. |
| shiftKey | shift키를 눌렀을 때 발생 합니다. |
| shiftLeft | 왼쪽 shift키를 눌렀을 때 발생 합니다. |
| srcElement | 이벤트를 발생한 객체를 설정 합니다. |
| srcElement.name | 이벤트가 발생한 객체의 이름 |
| srcElement.value | 이벤트가 발생한 객체의 값 |
| type | 이벤트 객체의 이벤트 이름을 설정 합니다. |
| x | 선택한 객체의 x 좌표를 위치를 알려줍니다. |
| y | 선택한 객체의 y 좌표를 위치를 알려줍니다. |
라. 이벤트 설정 방법
● html에서 이벤트설정
● javascript에서 이벤트 설정
● 고전적 방법
● 리스너 사용 방법
html에서 이벤트 설정하기
html의 특정 태그에서 이벤트를 설정한다.
가. 설정 방법
| <태그명 이벤트핸들러명="처리내용“> |
설정예1] “이곳을 클릭하세요”부분을 마우스로 클릭하면 alert창이 뜬다.
| <BODY> <p onclick="alert('ok')">이곳을 클릭하세요</p> </BODY> |
설정예2] "함수를 호출합니다“ 부분을 클릭하면 함수가 호출되고 alert창을 띄운다.
| <HTML> <HEAD> <TITLE> 이벤트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> function func(){ alert("함수가 호출됨"); } </SCRIPT> </HEAD> <BODY> <p onclick="func()">이곳을 클릭하세요</p> </BODY> </HTML> |
나. 고전적 방법으로 설정하기
고전적인 방법은 callback함수를 지정하는 것과 같이 이벤트를 설정한다.
설정방법
| 객체명.이벤트핸들러명 = 함수명 |
실예] 문단을 클릭하면 메시지창을 띄우시오
| <HTML> <HEAD> <TITLE> 이벤트 테스트</TITLE> <SCRIPT LANGUAGE="JavaScript"> function init(){ a = document.getElementById("here"); a.onclick=func; } function func(){ alert("here"); } </SCRIPT> </HEAD> <BODY onload="init()"> <p id="here">이곳을 클릭하세요</p> </BODY> </HTML> |
실예2] 브라우저가 로딩되었을 때 버튼에 이벤트핸들러 지정하기
| <script> window.onload = function(){ // 브라우저가 로딩되면 ff = document.frm; ff.btn1.onclick = function(){ // 버튼에 이벤트 추가 alert("button click"); } } </script> </head> <body> <form name="frm"> <input type="button" name="btn1" value="click1"> </form> </body> |
다. 리스너 방식으로 설정하기
리스너 방식으로 이벤트를 설정하는 방식은 브라우저의 종류에 따라 다소 차이가 있다.
이벤트의 종류
이벤트의 종류
가. onFocus()/onBlur/onChange/onClick
● onfocus() : 객체가 포커스를 받았을 경우
● onblur() : 객체가 포커스를 잃었을 경우
● onchange() : 내용을 변경하였을 경우
● onclick() : 객체를 클릭했을 경우
[샘플예제]
<html>
<head>
<title> new document </title>
<script language="javascript">
function onf(f){
f.b.value="focus"
}
function onb(f){
f.b.value="blur"
}
function onc(f){
f.b.value="change"
}
function clk(f){
f.b.value="click"
}
</script>
</head>
<body>
<form name="ff">
<input type=text name="a" onfocus="onf(this.form)"
onblur ="onb(this.form)"><br>
<input type=text name="c" onchange="onc(this.form)"
onclick="clk(this.form)">
<input type=text name="b">
</form>
</body>
</html>
나. onLoad/onUnload/onMouseMove/onMouseOver/onMouseOut
/onMouseUp/onMouseDown
● onload() : html 문서 로딩직후 나 모든 프레임의 로딩직후
● onUnload() : 현재 html문서 보기를 종료할 때
● onMouseMove() : 마우스를 이동시킬 때
● onMouseOver() : 마우스 포인터가 있을때
● onMouseOut() : 마우스 포인터가 벗어났을때
● onMouseUp() : 마우스 버튼을 놓았을 때
● onMouseDown() : 마우스 버튼을 눌렀을 때
[실습예제]
<html>
<head>
<title> new document </title>
<script language="javascript">
function load(){
alert("반갑소. 어서어소")
}
function unload(){
alert("반가웠소. 길조심하소.")
}
function onf(f){
f.b.value="focus"
}
function onb(f){
f.b.value="blur"
}
function onc(f){
f.b.value="change"
}
function clk(f){
f.b.value="click"
}
</script>
</head>
<body onLoad="load()" onUnload="unload()">
<form name="ff">
<input type=text name="a" onfocus="onf(this.form)"
onblur ="onb(this.form)"><br>
<input type=text name="c" onchange="onc(this.form)"
onclick="clk(this.form)">
<input type=text name="b">
</form>
</body>
</html>
[응용예제] 바탕화면에서 마우스가 이동 될 때 바탕색 바꾸어보기
1. body에 이벤트 핸들러 추가
<body onMouseMove="mMove()">
2. mMove() 함수 정의
color = parseInt(Math.random()*255);
document.body.style.backgroundColor = r;
다. onReset/onSubmit
● onReset() 사용자가 reset 버튼을 눌렀을 때
● onSubmit() : 사용자가 submit 버튼을 눌렀을 때
<html>
<head>
<title> new document </title>
<script language="javascript">
function rset(){
alert("reset")
return false
}
function smit(){
alert("submit")
return false
}
</script>
</head>
<body>
<form onReset="return rset()"
onSubmit="return smit()">
<input type=text name="a">
<input type=text name="c">
<input type=text name="b">
<input type="reset"><input type=submit>
</form>
</body>
</html>
onreset() 과 onsubmit()은 그 버튼의 결과를 실행 할것인가 하지 않을 것인가를 결정해야 하기 때문에 함수에서 false 또는 true를 리턴해 주어야 한다.
리턴값이 false이면 해당 버튼의 기능을 수행하지 않고, true일 경우에는 해당 버튼의 기능을 수행한다.
라. onAbort/onError/onDblClick/onDrapDrop/onMove/onResize
● onAbort() : 이미지 읽기를 중지했을 때
● onError() : 문서 또는 이미지를 읽는 도중 오류가 발생했을 때
● onDblClick() : 마우스를 더블 클릭 했을 때
● onDrapDrop() : 마우스를 드래그앤 드롭 했을 때
● onMove() : 윈도우 또는 프레임이 이동하였을 때(IE에서는 안됨)
● onResize() : 윈도우 또는 프레임의 크기를 변경했을 때
[실습예제] 윈도우 화면을 더블 클릭하면 alert()창을 나타내는 예
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.ondblclick= mC; // 이벤트 콜백함수 지정
function mC(){
alert("ok");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
[결과] 브라우저 바탕화면을 더블 클릭하면 ...
댓글