이벤트와 이벤트 핸들러
웹문서를 읽어들일 때라든가, 다른 홈페이지로 이동할 때라든지, 또는 버튼이나 링크위에 마우스를 클릭하거나 위치시킨다던지 하는 이러한 것들이 바로 이벤트이다. 이 파트에서는 넷스케이프 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>
'웹프로그램' 카테고리의 다른 글
| 자바스크립트 메뉴를 클릭시 div를 보였다 안보였다 하기 (0) | 2008.11.07 |
|---|---|
| 자바스크립트 div를 이용하여 보였다 안보였다 하기 visibility 이용 (0) | 2008.11.07 |
| 자바스크립트 입력 내용이 숫자만 입력했는지 체크 (0) | 2008.11.07 |
| 자바스크립트 클립보드에 내용 복사하기 (0) | 2008.11.07 |
| 자바스크립트 특정 부분 클릭시 스크립트 함수 호출하기 (0) | 2008.11.07 |
| 자바스크립트 팝업창에서 부모 페이지 reload 하기 (0) | 2008.11.07 |
| 자바스크립트 쿠키를 서브 도메인 공유하기 (0) | 2008.11.07 |
| 자바스크립트 여러도메인 하나의 쿠키로 적용하기 [setcookie 함수] (0) | 2008.11.07 |