Capture Event Example

이벤트 종류별 설명	Go Event

onDblclick
onDragDrop
onKeyDown
onKeyPress
onMouseDown, onMouseUp
onMouseMove
onMove
onResize
onLoad
onFocus, onBlur

많은 경우의 동적인 페이지나 웹응용P/G을 만들 때, 두 개 이상의 이벤트를 동시에 사용합니다. 이벤트를 두 개 이상 동시에 사용할 때는 CapturEvents를 하여 두 이벤트를 제어합니다. 그리고, window, document, layer 전체에게 이벤트를 지정할 때도 captureEvents를 지정합니다. 그러면 window, document, layer에 속한 어떤 Object도 자신이 이 이벤트 헨들러를 가지고 있지 않아도 자신을 포함한 Object가 이벤트를 capture 했으므로 이 이벤트가 호출됩니다. 특정 Object가 이벤트를 가지고 있지 않아도 상위의 이벤트를 사용할 수 있습니다. 그리고 routeEvent(), handleEvent(), releaseEvents()로 이들 이벤트를 여러가지 형태로 다룰 수 있습니다.

CaptureEvents()는 NN4에서만 지원하고 해당하는 개념입니다. IE4에서는 필요가 없습니다.

function mouseDown(e) {

	window.status = "Document "+e.type+" event count : "+co++;
}

document.onmousedown = mouseDown;
co = 0;

실행하기(NN4)

document 즉, 페이지의 바탕화면에 mousedown 이벤트를 지정했습니다. 레이어(or css-p)나 바탕화면의 글자를 누르면 이벤트가 일어나지 않습니다. 레이어는 document object가 아니고 document.layer 이기 때문입니다.

document가 가지고 있는 모든 element에게 특정 이벤트를 지정할 때, captureEvents(특정 이벤트)를 사용합니다. document.captureEvents(Event.MOUSEDOWN); 로 document 전체에 mouseDown이벤트를 지정합니다.

function mouseDown(e) {

	window.status = "Document "+e.type+" event count : "+co++;
}

document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = mouseDown;
co = 0;

실행하기(NN4)

CaptureEvents는 이벤트가 일어나서 그 이벤트가 고유작업을 하기전에 지정된 이벤트 헨들러를 사용합니다. 그리고, 헨들러의 반환값으로 Object 고유작업의 실행여부를 결정할 수 있습니다.

이벤트를 capture하는 방법과 사용법이 NN4, IE4에서 서로 다릅니다.

페이지 아무곳에서 마우스를 누르면 어떤 지정된 이벤트 헨들러 함수가 호출되게 할려면..

NN4는..

document.captureEvents(Event.MOUSEDOWN); // (1)
document.onmousedown = mouseDownFunction;

이렇게 주석 (1)으로 mousedown 이벤트를 capture한다고 지정하고 나서 이벤트헨들러에 함수를 지정합니다. 이제 페이지 아무곳에서 마우스 버튼을 누르면 지정된 함수 mouseDownFunction이 호출됩니다.

document.onmousedown = mouseDownFunction;

만 지정한 경우 document 속의 layer에 마우스를 누르면 mouseDownFunction은 나오지 않습니다. layer는 document.layer이기 때문입니다. layer는 mouseDown 이벤트가 없습니다.

그래서, document의 아무데나 눌러도 mouseDownFunction을 호출하기 위해서 mouseDown 이벤트가 일어날 수 있는 범위를 지정하는 것이 주석(1)번 줄입니다. 즉, document 속에 포함된 모든 Object에게 mouseDown 이벤트를 지정합니다.

두 개 이상의 이벤트도 capture할 수 있습니다. mousedown과 mouseup을 capture할려면 주석(1)을 이렇게 해주면 됩니다.

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown = mouseDownFunction;
document.onmouseup = mouseUpFunction;

두 개 이상을 지정할 때는 |을 사용하여 구분합니다. 백스페이스키 바로 왼쪽에 있는 키입니다. 그리고, 여기서 대소문자를 꼭 지켜야 합니다. Event.MOUSEDOWN | Event.MOUSEUP 꼭 대문자는 대문자로 소문자는 소문자로 써야합니다.

IE4는..

document.onmousedown = mouseDownFunction;

IE4에서는 capture라는 개념이 없습니다. 단순히 필요한 이벤트를 지정하면 됩니다. mouseup을 같이 지정할려면

document.onmousedown = mouseDownFunction;
document.onmouseup = mouseUpFunction;

이렇듯 필요한 이벤트를 지정시 NN4에서는 captureEvents로 미리 필요한 이벤트를 지정하고 각 이벤트 헨들러에 사용할 함수를 지정하면 되고 IE4에서는 함수만 지정하면 됩니다.

함수를 지정시 괄호를 사용하면 안됩니다. 괄호를 지정하면 바로 실행을 하는 겁니다. 이벤트 헨들러로 지정할 때는 그 이벤트가 일어날 때 사용하기 위해서 괄호를 빼고 지정해야 이벤트가 일어 났을 때, 함수가 호출됩니다. 그리고, IE4에서 이벤트헨들러는 소문자로 써야합니다. onmousedown입니다. NN4에서는 onMouseDown으로 사용할 수 있지만, IE4와 같이 사용할 때는 소문자로만 사용하는 게 편합니다.

NN4에서는 captureEvents외에 event를 다루는 routeEvent, handleEvent가 있습니다. 이 둘은 event를 조종하는 것이고, 반드시 captureEvents로 지정한 이벤트의 지정함수 안에서 사용해야 합니다.

document.captureEvents(Event.MOUSEDOWN); 
document.onmousedown = mouseDownFunction;

function mouseDownFunction(e) {
	document.routeEvent(e);
	document.handleEvent(e);
}

onDblclick

마우스를 연속해서 두 번 누르면 일어나는 이벤트입니다.

document.ondblclick = dblclickFunction;

onDragDrop

화일이나 북마크를 끌어서 놓으면 일어납니다. IE4에서는 이 이벤트가 없습니다.

<body onDragDrop="alert('Drag Drop is fired')">

이렇게 해놓고 페이지에 화일을 끌어 놓으면 alert 박스가 뜹니다.

onKeyDown

NN4는 document, link, Textarea의 이벤트.

function keyDown(e) {
	var keyValue = e.which;
	var keyChar = String.fromCharCode(e.which);
	alert("Key Value = " + keyValue + "\nKey Char = " + keyChar);
}

document.captureEvents(Event.KEYDOWN); //(1)
document.onkeydown = keyDown;

위의 코드는 눌러진 키의 code 값과 실제 키값을 보여줍니다.

String.fromCharCode(e.which)

은 눌러진 키의 code값을 실제문자 값으로 바꾸는 것입니다.

function keyDown(e)

의 e는 이벤트 Object를 사용할 때 지정해 줘야합니다. e.which로 사용했습니다. 키 값이나 마우스 버튼을 가리킵니다. 왼쪽 마우스 버튼은 (1), 오른쪽 마우스 버튼은 (3) 의 정수를 반환합니다.

실행하기(NN4)

위의 주석(1)의 captureEvents()를 넣어주지 않으면 마우스 커서의 위치에 따라서 keyDown이벤트가 나오지 않습니다. 마우스 커서의 위치에 상관없이 keyDown을 사용할려면 주석 (1)을 넣어줘야 합니다.

function keyDown(e) {
	var keyValue = e.which;
	var keyChar = String.fromCharCode(e.which);
	alert("Key Value = " + keyValue + "\nKey Char = " + keyChar);
}

document.onkeydown = keyDown;

실행하기(NN4)

IE4는 key값을 얻을 때, event.keyCode를 사용합니다.

function keyDown() {
	var keyValue = event.keyCode;
	var keyChar = String.fromCharCode(event.keyCode);
	alert("Key Value = " + keyValue + "\nKey Char = " + keyChar);
}

document.onkeydown = keyDown;

이것도 마찬가지로 키 값과 문자를 보여줍니다.

var keyValue = event.keyCode

로 눌러진 키의 code 값을 지정합니다.

예제 실행하기(IE4)

여기서 소문자 a와 대문자 A가 같은 값을 가집니다. 서로 다른 값을 가지는 NN과 다릅니다.
폼의 text에 지정해도 document에 지정한 것과 같은 값을 반환합니다.

예제 실행(ie4)

이번에는 document와 form text에 둘 다 keyPress 이벤트를 지정해도 결과는 같습니다.

예제 실행(ie4)

! 유의점

1. NN4와 IE4의 code값이 몇몇 키가 다르다.
2. IE4에서는 소문자 대문자를 똑같이 취급한다. 'a', 'A'가 같은 code값을 반환한다. (keyPress는 NN4와 같이 다른 값입니다.)
3. NN4에서 onKeyDown의 반환값은 onKeyPress의 값에 영향을 미친다.
onKeyDown 함수가 return false를 반환하면 onKeyPress의 이벤트는 지정해도 나오지 않는다. 예제(nn4,ie4)

onKeyPress

KeyPress는 키를 누르고 있으면 발생하는 이벤트입니다. KeyDown다음에 일어납니다.

NN4는..

function keyPress(e) { 
     var keyChar = String.fromCharCode(e.which); 
     if (keyChar == 'A' || keyChar == 'a') 
	document.D1.left += 10;

     else if(keyChar == 'Z' || keyChar == 'z') 
	document.D1.left -= 10; 

     else return false; 
} 
document.captureEvents(Event.KEYPRESS); 
document.onkeypress = keyPress; 

<div id=D1 style="position:absolute; left:300; top:100; width:100; height:100; clip:rect(0,100,100,0); 
	background-color:yellow; layer-background-color:yellow;">CSS Layer
</div>

a나 z 키를 누르면 D1 layer가 옆으로 움직입니다. 먼저 keyDown처럼 captureEvents(Event.KEYPRESS)로 keyPress를 document가 capture 한다고 했습니다. document에서 일어나는 모든 keyPress 이벤트는 keyPress 함수를 호출합니다. 'A'나 'a'키는 'D1' layer를 왼쪽으로 10px만큼 이동시키고 'Z'나 'z'는 오른쪽으로 10px만큼 이동시킵니다. 그외의 키는 듣지 않습니다.

IE4는..

function keyPress() { 
     var keyChar = String.fromCharCode(event.keyCode); 
     if (keyChar == 'A' || keyChar == 'a') 
	document.all.D1.style.pixelLeft += 10;

     else if(keyChar == 'Z' || keyChar == 'z') 
	document.all.D1.style.pixelLeft -= 10;

     else return false; 
} 
document.onkeypress = keyPress; 

<div id=D1 style="position:absolute; left:300; top:100; width:100; height:100; clip:rect(0,100,100,0); 
	background-color:yellow; layer-background-color:yellow;">CSS Layer
</div>

위의 NN4용과 기능이 같습니다. 둘 다 사용하게 하나로 모으면 아래와 같습니다.

n4 = (document.layers) ? true : false;
e4 = (document.all) ? true : false;

function keyPress(e) { 
     if(n4) var keyChar = String.fromCharCode(e.which); 
     if(e4) var keyChar = String.fromCharCode(event.keyCode); 

     if (keyChar == 'A' || keyChar == 'a') {
	if(n4) document.D1.left += 10;
	else document.all.D1.style.pixelLeft += 10;
     }
     else if(keyChar == 'Z' || keyChar == 'z') {
	if(n4) document.D1.left -= 10;
	else document.all.D1.style.pixelLeft -= 10;
     }
     else return false; 
} 
if (n4) document.captureEvents(Event.KEYPRESS); 
document.onkeypress = keyPress;

먼저 두 브라우저를 구분합니다. n4, e4 두개의 외부변수로 맞는 코드를 사용합니다.

실행하기(NN4, IE4)

ALT, CTRL, SHIFT키 판별하기

nn4의 e.modifiers는 키를 누를때, ctrl, alt, shift키를 누르고 키를 눌렀는지를 판별합니다. ctrl key와 alt key 는 e.modifiers가 정수 2를 반환하고 shift key는 e.modifiers가 정수 4를 반환합니다.

ie4는 event.shiftKey, event.altKey, event.ctrlKey는 shift, ctrl, alt키를 누르면 true를 누르지 않으면 false를 반환합니다.

onMouseDown, onMouseUp

마우스 버튼을 눌렀을 때 가장 먼저 일어나는 이벤트이고, 마우스 버튼이 내려가 있는 상태입니다. 두 이벤트로 layer를 이동하고 멈출 때, 가장 편리하게 사용할 수 있는 이벤트입니다. 마우스를 누르면 어떤 동작을 하고 마우스를 놓으면 동작을 멈추게 할수 있습니다. 가장 편리한 작동법입니다.

n4 = (document.layers) ? true : false;
e4 = (document.all) ? true : false;

if(n4) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
document.onmousedown = mouseDown;
document.onmouseup= mouseUp;

<div id=D1 style="position:absolute; left:200; top:200; width:100; height:100; 
	background-color:red; layer-background-color:red;">
CSS Layer
</div>

NN4, IE4를 구분하여 사용하기 위해 n4, e4 외부변수를 만들고 지정합니다. 그리고, mouseDown, mouseUp 이벤트를 지정합니다.

function mouseDown(e) {
	if (n4) {	
		if (e.which == 1) {
			moveDiv();
		}
	}
	if (e4) {
		if (event.button == 1) {
			moveDiv();
		}
	}
}

마우스를 눌렀을 때 실행하는 이벤트입니다. NN4에서는 event Object를 사용하기 위해서 function mouseDown(e) 처럼 함수의 인자로 event를 지정하는 것을 지정해야 합니다. 꼭 e로 할 필요는 없습니다. 인자와 사용할 때 같은 것이면 됩니다. e.which는 NN4에서 마우스나 키를 눌렀을 때, 누른 마우스 버튼이나 키 값을 가리킵니다. 마우스의 값은 왼쪽 마우스버튼은 1이고 오른쪽은 3입니다.

IE4에서는 event를 사용할 때, 인자로 지정할 필요가 없습니다. event로 사용하면 됩니다. 그리고, event.button은 마우스버튼을 말합니다. 키는 event.keyCode입니다. 키와 마우스 버튼을 따로 구분합니다. event.button은 왼쪽은 1이고 오른쪽은 2이고 중간 버튼은 4입니다. NN4와는 왼쪽 마우스 버튼만 같고 나머지는 다릅니다.

function mouseUp() { 
	if (self.ID) clearTimeout(ID);
}
function moveDiv() { 
	if(n4) document.D1.left += 10;
	else document.all.D1.style.pixelLeft += 10;
	ID = setTimeout("moveDiv()", 10);
}

마우스를 누르면 호출되는 moveDiv()가 layer를 오른쪽으로 10px만큼 이동시키고 마우스를 놓았을 때 이동을 멈추기 위해서 ID 외부변수를 지정합니다. 이 ID 외부변수는 mouseUp()이 clearTimeout()로 setTimeout()를 해제할 때 사용합니다. 마우스 버튼을 놓으면 mouseup 이벤트가 일어나고 mouseUp() 함수를 호출하여 layer 이동을 멈춤니다.

IE4는 위치를 나타내는 attribute가 무척 많습니다. layer의 페이지에서의 왼쪽 좌표값을 나타내는 것이 left, pixelLeft가 있습니다. left는 px단위를 가지는 문자열입니다. 반면에, pixelLeft는 정수값을 가집니다. 가령, layer가 페이지에서 수평으로 100px만큼 떨어져 있으면 left는 "100px"이고 pixelLeft는 정수 100입니다.

if (self.ID) clearTimeout(ID);

는 마우스 왼쪽 버튼을 누르지 않고 오른쪽 버튼을 눌렀을 때, ID가 undefined 에러가 나오는 것을 예방합니다. 외부변수를 미리 선언하지 않고 사용할 때는 self.외부변수로 사용합니다. 미리 외부변수를 선언해 놓았으면, if (self.외부변수) 나 if (외부변수) 중에서 아무거나 사용할 수 있습니다.

실행하기(NN4, IE4)

onMouseMove

마우스를 움직이면 발생하는 이벤트입니다. NN4에서는 captureEvents(Event.MOUSEMOVE)로 선언하고 사용해야 합니다. IE4에서는 자신만 선언하면 됩니다. 주로 레이어(css-p)를 마우스로 끌어 옮길 때 사용합니다.

onLoad

문서(document)가 다 출력되면 일어나는 이벤트입니다. <body onLoad="함수" 로 HTML 구문안에서 사용하는데, JavaScript로 정의할 때는 window.onload=함수 로 사용할 수 있습니다.

onFocus, onBlur

window, 레이어 그리고 폼에서 주로 사용하는 이벤트입니다. 마우스로 그것을 누르면 focus 이벤트가 일어나고 다른 것을 누르면 blur 이벤트가 일어납니다. 이벤트의 순서는 mousedown 이벤트 다음에 일어납니다. blur 이벤트는 먼저 focus를 주어야 즉, 마우스를 누르고 다른 것을 눌렀을 때, 일어납니다.

<div id=D1 style="position:absolute;">CSS LAYER</div>
<script>
	function go() {
		alert(this.id)
	}
	if(document.layers) document.D1.onfocus = go
	if(document.all) document.all.D1.onfocus = go
</script>

위의 D1 레이어를 누르면 레이어의 id인 "D1" 을 alert 창이 보여줍니다.

onMove

사용자가 창을 끌어 옮기거나 JavaScript로 창을 옮길 때, 일어나는 이벤트 입니다. NN4만 지원하는 window의 이벤트입니다. 현재의 창에 onMove를 지정 할려면..

self.onmove = movefunction;

새 창을 열고 그 창에 onMove를 지정할 때는 ..

function moveFunction () {

	window.status = this.name + " Move Count : "+co++;
}
function newWin() {
	var temp = window.open("", "winName", "width=200,height=200");
	var print = "<html><body>New Window</body></html>";

	temp.document.open();
	temp.document.write(print);
	temp.document.close();

	temp.captureEvents(Event.MOVE);
	temp.onmove = moveFunction;
}
co = 0;

새 창을 열고 위치를 이동하면 moveFunction 함수가 호출됩니다. window의 이벤트인 onmove에 moveFunction 함수를 지정했습니다. 창을 열고 움직이면 window.status의 co 값이 1씩 증가합니다. moveFunction안의 this는 새 창을 가리킵니다. 이벤트 헨들러에 지정된 함수에서 this는 지정한 Object 자신입니다.

실행하기(NN4)

onResize

사용자가 창의 크기를 바꾸거나 JavaScript로 창의 크기를 바꿀 때 일어나는 이벤트 입니다. NN4에서는 window의 이벤트이고, IE4는 APPLET, BUTTON, CAPTION, DIV, EMBED, FRAMESET, HR, IMG, MARQUEE, SELECT, TABLE, TD, TR, TEXTAREA, window 의 이벤트입니다.

현재의 창에 onResize를 지정할려면..

self.onresize = resizeFunction;

새 창을 열고 그 창에 onResize를 지정할 때는 ..

function resizeFunction () {

	window.status = this.name + " Resize Count  : "+co++;
}
function newWin() {
	var temp = window.open("", "winName", "width=200,height=200,resizable=yes");
	var print = "<html><body>New Window</body></html>";

	temp.document.open();
	temp.document.write(print);
	temp.document.close();

	temp.captureEvents(Event.RESIZE);
	temp.onresize = resizeFunction;
}
co = 0;

새 창을 열고 창의 크기를 바꾸면 resizeFunction 함수가 호출됩니다. 이 때 resizable=yes 를 지정해 주어야 합니다. 지정하지 않으면 크기를 바꿀수 없습니다. 여기서도 this는 이벤트를 지정한 Object 자신입니다.

실행하기(NN4)

TOP Go to Event TOP