이벤트
이벤트와 이벤트 핸들러
웹문서를 읽어들일 때라든가, 다른 홈페이지로 이동할 때라든지, 또는 버튼이나 링크위에 마우스를 클릭하거나 위치시킨다던지 하는 이러한 것들이 바로 이벤트이다. 이 파트에서는 넷스케이프 4.0 버전에서 지원하는 자바스크립트 1.2를 중심으로 설명하려한다.
우선 간단하게 이벤트와 이벤트 핸들러의 정의를 확인하자. 이벤트란 사용자가 브라우저 윈도우상에서 버튼을 클릭하거나, 마우스를 움직이거나, 또는 키보드의 키를 누르는 등의 자바스크립트가 인식할 수 있는 행위를 말한다. 자바스크립트가 이러한 이벤트를 인식했을 때 그에 대한 반응으로써 나타나는 것이 이벤트 핸들러이다. 예를 들어 버튼을 클릭했을 때 팝업윈도우가 나타난다면 버튼이 눌려진것은 이벤트이고 팝업윈도우를 띄우는 행위는 이벤트 핸들러이다. 이벤트 핸들러를 쉽게 함수나 메소드라고 생각하면 된다. 그렇다면 자바스크립트가 인식할 수 있는 이벤트에는 과연 어떠한 종류가 있는지를 알아보자.
click |
폼과 같은 입력양식이나 버튼, 링크를 클릭했을 때 발생하는 이벤트 |
dbclick |
폼과 같은 입력양식이나 버튼, 링크를 더블클릭했을 때 발생하는 이벤트 |
mouseover |
링크 위로 마우스 포인터가 위치했을 때 |
mouseout |
마우스 포인터가 링크 밖으로 벗어났을 때 |
mousedown |
마우스버튼을 눌렀을 때 |
mouseup |
마우스버튼을 눌렀다 놓았을 때 |
mousemove |
마우스를 움직일 때 |
keypress |
키보드의 키를 눌렀을 때 |
keyup |
키보드의 키를 눌렀다 놓았을 때 |
load |
웹문서가 읽혀졌을 때 |
unload |
브라우저에서 웹문서가 사라질 때 |
이 이외에도 몇가지의 이벤트가 더 있지만 여기서는 자세하게 언급하지는 않겠다. 이제 이러한 이벤트를 가지고 몇가지의 예제를 보자. 우선 resize 이벤트에 대한 예제를 보자. 다음의 버튼을 클릭하면 새로운 윈도우가 뜰 것이다. 이때 생성되는 이 윈도우의 크기를 변화시키면 자바스크립트가 이를 인식해 인도우의 크기가 변화됐다는 팝업윈도우를 띄울 것이다. 예제를 실행시켜보자.
resize.html
<html>
<head>
<script language="JavaScript">
<!--
window.onResize = message;
function message() {
alert!("윈도우의 크기가 바뀌는 이벤트가 발생했습니다!");
}
// end of script -->
</script>
</head>
<body>
윈도우의 크기를 바꾸어보세요!
</body>
</html>
자, 여기서 아래의 코드를 보자.
window.onresize = message;
이것은 등호의 왼쪽에서 지정한 이벤트가 발생했을 때 오른쪽에 지정한 이벤트핸들러를 처리하라는 의미이다. 윈도우의 크기가 바뀌었을 때 발생하는 이벤트는 resize이벤트이다. 이 이벤트에 대한 이벤트핸들러를 나타낼 때에는 앞에 on을 덧붙인다. 그래서 resize 이벤트가 발생했을 때 자바스크립트는 이를 감지하고 이벤트핸들러로 지정한 함수 message()를 호출하게 된다. 그래서 함수 message()의 내용에 따라 팝업윈도우가 뜨는 것이다. 여기서 한가지 주의할 것은 이벤트핸들러를 나타낼 때에는 비록 함수를 호출하는 것이지만 ()를 적어서는 안된다. 만일 ()를 함께 적으면 일반 함수호출로 인식되어버리기 때문이다.
이러한 표현방법이 낯설수도 있다. 하지만 지금까지 접했던 이벤트 처리방법의 형식을 기억해보자. 예를 들어 입력양식 내의 버튼을 눌렀을 때 버튼이 눌렸다는 팝업윈도우를 띄우는 경우이다. 코드는 아래와 같을 것이다.
<form>
<input type="button" name="myBtn" value="버튼 클릭이벤트 예제"
onClick="alert!('버튼을 누르는 이벤트가 발생하였습니다!')">
</form>
이와 같은 코드를 앞에서와 같은 이벤트핸들러를 지정해서 써보면 다음과 같다.
<form>
<input type="button" name="myBtn"
value="버튼 클릭이벤트 예제">
</form>
...
<script language="JavaScript">
<!--
document.forms[0].myBtn.onClick = message;
function message() {
alert!('버튼을 누르는 이벤트가 발생하였습니다!');
}
// end of script -->
</script>
어떤가? 아마도 여러분은 두 번째 대안이 더 복잡하게 보일 것이다. 그렇다면 왜 resize 예제에서는 이렇게 복잡해 보이는 방법을 사용했을까? 자, 이벤트핸들러는 첫 번째 방법처럼 이벤트 핸들러를 사용하고자 하는 곳에서 HTML 태그의 한속성으로도 지정될 수 있다. 그리고 그때 속성의이름은 해당 이벤트 이름 앞에 on을 붙이면 된다. 그래서 첫 번째에서는 <input> 태그내의 'onClick'속성에서 호출할 함수를 지정하였다. 그러나 맨 처음 resize 예제의 이벤트객체인 윈도우 객체는 태그 내에서 쓰일 수가 없다. 그렇기 때문에 조금은 복잡해 보이는 방법을 사용해야 하는 것이다.
이벤트 객체
이벤트 객체는 넷스케이프 4.0 발표와 함께 제공되기 시작한 자바스크립트 객체이다. 이벤트가 발생할 때마다 이 이벤트객체가 이벤트핸들러에 전달된다.
오른쪽의 이미지 상에 마우스를 놓고 클릭해보자. 그러면 마우스이벤트가 발생한 위치의 좌표를 나타내는 팝업윈도우가 나타날 것이다.
이 예제는 <ilayer> 태그를 사용하므로 넷스케이프 4.0 이상에서만 실행가능하다.
<ilayer>
<layer>
<a href="javascript://" onClick="if (browserOK)
alert!('x 좌표: ' + event.x + ' y 좌표: ' + event.y);
return false;">
<img src="davinci.jpg" width=209 height=264 border=0></a>
</layer>
</ilayer>
여기서는 <a> 태그내에 onClick 이벤트핸들러를 사용하고 있다. 여기서는 event.x 와 event.y 라는 새로운 이벤트 객체를 사용했는데 이 객체는 해당이벤트가 발생한 위치에서의 좌표를 가지고 있다.
이때 좌표는 브라우저 윈도우를 기준으로 하지 않고 레이어를 기준으로 한다. 그리고 이벤트핸들러를 정의할 때에는 리턴값에 주의해야 한다. 즉, 위의 경우와 달리 true를 리턴하게 되면 사용자가 레이어상에서 클릭했을 때 링크되어 있는 문서로 이동하게 된다. 그러나 false를 리턴하게 되면 링크에 연결되어 있는 문서가 나타나지 않고 이벤트가 여기에서 끝나게 된다. 위의 예제에서는 좌표를 얻는 것이 목적이므로 false를 반환하였다.
이벤트객체로는 다음과 같은 것들이 있다.
속 성 |
내 용 |
data |
DragDrop 이벤트로 선택된 객체의 URL 주소 |
layerX |
이벤트가 발생한 위치의 x 좌표. 레이어를 기준으로 한다. |
layerY |
이벤트가 발생한 위치의 y 좌표. 레이어를 기준으로 한다. |
pageX |
이벤트가 발생한 위치의 x 좌표. 페이지을 기준으로 한다. |
pageY |
이벤트가 발생한 위치의 y 좌표. 페이지을 기준으로 한다. |
screenX |
이벤트가 발생한 위치의 x 좌표. 화면을 기준으로 한다. |
screenY |
이벤트가 발생한 위치의 y 좌표. 화면을 기준으로 한다. |
which |
마우스버튼의 종류, 또는 입력키의 ASCII-값 |
modifiers |
마우스와 키 이벤트 발생시 함께 눌려진 modifier 키 예) ALT_MASK, CONTROL_MASK, META_MASK, SHIFT_MASK |
target |
이벤트가 전달될 객체를 나타내는 문자열 |
type |
이벤트의 종류 |
이벤트 잡아내기
자바스크립트 1.2 부터는 웹페이지상에서 발생하는 이벤트를 가로챌 수 있게 되었다. 예를들어 지금까지는 사용자가 버튼을 클릭하게 되면 이 버튼의 onClick 이벤트 핸들러가 호출이 된다. 그러나 이제 자바스크립트를 이용하면 이벤트가 버튼과 같은 대상객체에 의해 처리되기전에 이 이벤트를 가로챌 수 가 있게 되었다.
이를 이용하면 일정조건이 만족되지 않은 상태에서 버튼이나 링크가 클릭되지 못하게 한다든가, 키가 객체에 입력되지 못하게 한다든가 하는 등의 작업을 수행할 수 가 있다. 다음의 예제를 보며 이를 확인하자.
event_capture.html
<html>
<script language="JavaScript">
<!--
window.captureEvents(Event.CLICK);
window.onclick = message;
function message(e) {
alert!("연결되어 있는 문서로 넘어가기전에 이벤트를 잡았습니다!");
return routeEvent(e);
}
// end of script -->
</script>
<body>
<form>
<a href="test.html" onClick="alert!('연결문서로 넘어갑니다')">
이 링크를 클릭하세요!</a>
</form>
</body>
</html>
자바스크립트 1.2에서 이벤트를 잡아내는 기능을 구현하기 위해 4가지의 메소드를 알아야 한다.
captureEvents |
웹페이지에서 잡아낼 이벤트를 지정한다. |
releaseEvents |
captureEvents로 잡아낸 이벤트를 해제한다. |
routeEvent |
잡아낸 이벤트를 처리할 이벤트 핸들러가 있으면 전달하여 처리한다. |
handleEvent |
이벤트를 특정객체의 이벤트 핸들러로 전달한다. |
captureEvents(Event.CLICK)와 같이 지정하면 웹페이지상에서 마우스를 클릭했을 때 그 이벤트에 대한 이벤트핸들러가 호출되기 전에 해당 이벤트를 가로챈다. 하나뿐 아니라 여러개의 이벤트를 한꺼번에 잡아낼 수 있는데 이대에는 '|' 를 사용하여 구분한다. 다음과 같다. captureEvents(Event.CLICK | Event.MOUSEDOWN | Event.MOUSEUP)와 같이하면 마우스를 누르거나 클릭하거나 눌렀다 떼었을 때의 각각의 이벤트 모두를 검사하여 해당 이벤트가 발생할 때 이를 가로챈다.
한편 captureEvents로 감시하고 있는 이벤트를 더이상 감시하여 가로챌 필요가 없을 경우 이를 해제하는 역할을 하는 것이 releaseEvents이다. releaseEvents(Event.CLICK)라고 하면 그 이후로는 더이상 마우스 클릭이벤트가 발생해도 이벤트를 가로채지 않는다.
routeEvent는 현재 발생한 이벤트를 가로채어 작업을 수행한후 원래 이 이벤트를 처리하기 위해 지정되어 있는 이벤트핸들러가 있을 경우 이쪽으로 이벤트를 전달하는 역할을 한다.
handleEvent는 특정한 객체의 이벤트핸들러에게 이벤트를 전달하는데 사용한다. 예를 들어 버튼 1을 클릭했을 때 이 버튼 1의 클릭과 연결되어 있던 이벤트핸들러가 호출되지 않고 버튼 2와 연결되어 있던 이벤트핸들러를 호출할 수 가 있는 것이다.
자, 이제 위의 소스코드를 살펴보자. 먼저 웹문서상에는
<a href="test.html" onClick="alert!('연결문서로 넘어갑니다')">
이 링크를 클릭하세요!</a>
위 코드와 같이 링크가 하나 있고 이 링크를 클릭하면 이 클릭이벤트에 대한 이벤트핸들러가 호출되어 '연결문서로 넘어갑니다'라는 팝업윈도우가 뜨고나서 연결문서인 'test.html'로 넘어가게 된다. 이벤트 가로채기가 없을 경우에는 이렇게 진행이 될 것이다. 그러나 소스를 보면 아래와 같은 코드가 있다.
window.captureEvents(Event.CLICK);
이 코드가 있으면 웹문서상에서 사용자가 마우스를 클릭했을 때 onClick 속성에서 지정한 이벤트 핸들러로 넘어가기 전에 이 이벤트를 가로채게 된다.
window.onclick = message;
function message(e) {
alert!("연결되어 있는 문서로 넘어가기전에
이벤트를 잡았습니다!");
return routeEvent(e);
}
앞에서 배운것처럼 위의 코드는 onclick이벤트가 발생했을 때 해당 이벤트핸들러인 message(e) 함수를 호출하여 팝업윈도우를 띄우게 된다. 그리고 나서 'routeEvent(e)'를 호출하여 원래 링크와 연결된 이벤트핸들러를 실행하게 된다. 따라서 이벤트 가로채기가 있을 때의 실행순서는 '연결되어 있는 문서로 넘어가기 전에 이벤트를 잡았습니다!' 라는 팝업윈도우가 뜨고 나서 '연결문서로 넘어갑니다!' 라는 팝업윈도우가 뜬다. 그리고 나서 링크로 연결되어 있던 문서로 이동을 하게 된다.
handle_event.html
<html>
<script language="JavaScript">
<!--
window.captureEvents(Event.CLICK);
window.onclick = message;
function message(e) {
alert!('문서에서 이벤트를 가로채었습니다!');
return document.links[1].handleEvent(e);
}
// end of script -->
</script>
<body>
<a href="test.html" onClick="alert!('첫번째 링크를 클릭했습니다.')"> 첫번째 링크</a> <p>
<a href="test.html" onClick="alert!('두번째 링크를 클릭했습니다.')"> 두번째 링크</a> <p>
</body>
</html>
실행결과 '첫번째 링크'를 클릭했음에도 이벤트핸들러는 두번째 링크에서 지정하고 있는 함수 alert!('두번째 링크를 클릭했습니다.')를 호출하는 것을 알 수 있다.
return document.links[1].handleEvent(e);
위의 부분에서 잡아낸 이벤트를 links[1] 즉, 두번째 링크객체의 이벤트 핸들러로 전달함으로써 어떤 링크를 클릭하던지 사용자는 '두번째 링크를 클릭했습니다'라는 팝업윈도우를 보게 되는 것이다.
이 파트에서 키보드를 눌렀을 때 어떠한 키가 눌렸는지를 나타내는 팝업윈도우가 뜨는것을 경험했을 것이다. 앞에서 이야기 한 내용을 이해한다면 전혀 어렵지 않게 구현할 수 있다.
<html>
<script language="JavaScript">
// 키가 눌려졌을 때의 이벤트를 감시하여 가로챈다.
window.captureEvents(Event.KEYPRESS);
// 이벤트가 잡혔을 때 먼저 pressed() 함수를 호출한다.
window.onkeypress= pressed;
function pressed(e) {
alert!("지금 누른 키의 아스키코드는 : "
+ e.which);
}
</script>
</html>
[출처] 자바스크립트 배우기- Event|작성자 아톰
'Javascript' 카테고리의 다른 글
event.keyCode 번호표 (0) | 2010.11.14 |
---|---|
유용한 스크립트 (0) | 2010.11.14 |
정규식 (0) | 2010.11.14 |
Ajax Request 이해 (0) | 2010.11.14 |
common.js 내용 (0) | 2010.11.14 |