Position element Design

상하위를 captureEvents(), routeEvent()로 연결했을 때의 반환값

상위, 하위가 같은 이벤트를 가지고 있을 때, IE4는 둘 다 이벤트가 일어납니다. 하지만, NN4는 하위의 이벤트만 일어납니다.

여기서 IE4처럼 둘 다 일어나게 하는 것이 captureEvents(), routeEvent()입니다.

captureEvents(), routeEvent()를 선언하고 동시에 상위, 하위의 이벤트가 일어나면 상위의 이벤트만 일어납니다. 위의 경우와 반대입니다.

captureEvents는 이벤트를 가로채간다는 말입니다. captureEvents는 항상 상위에서 하위의 Object에게 Event 를 Capture할 때 사용합니다. 그래서, 같은 이벤트 헨들러는 모두 상위에게 주어집니다.

따라서, 하위의 이벤트 헨들러는 사용되지 않습니다. 이 때, 하위에서도 지정된 이벤트 헨들러를 사용할 수 있게 하는 것이 routeEvent() 입니다. 하위에게 이벤트 통로(route)를 열어준다는 뜻입니다.

IE4에서는 이런 개념이 없습니다. 지정된 이벤트는 하위에서 부터 상위로 전부 다 실행합니다.

var NN4 = ( document.layers ) ? true : false;
var IE4 = ( document.all ) ? true : false;

function clickEvent() { alert("Capture Event") }

function capEvent() {
	if ( NN4 ) {
		document.captureEvents(Event.CLICK);
		document.onclick = clickEvent;
	}
	if ( IE4 ) document.onclick = clickEvent;
}
</script>
</head>

<body onLoad="capEvent()">
<a href="javascript:alert('HREF')" onClick="alert('Link Click')">Link</A>

위의 소스는 document에게 모든 click 이벤트를 함수 clickEvent에게 지정하는 것입니다.
NN4와 IE4의 이벤트가 일어나는 순서가 다릅니다.

NN4는 window -> document -> Object 입니다.
IE4는 Object -> document -> window 입니다.

정반대 입니다. 위의 소스에서 Link 링크를 누르면 순서는..

[NN4] Capture Event -> HREF 즉, document -> link Object 입니다.
[IE4] Link Click -> Capture Event -> HREF 즉, link Object -> document 입니다.

이벤트가 일어나는 것이 Object의 계층에서 반대로 일어납니다. NN4에서는 Link Click 이 나오지 않는 이유는 document에게 captureEvents로 document 안의 모든 Object의 click event를 주었기 때문입니다. 따라서, 링크의 click도 document에게 갑니다. HREF 가 나오는 것은 자신의 click 이벤트 헨들러는 document에게 captureEvents로 빼았겼지만, 링크는 document 속에 포함되어 있는 Object입니다. document 안의 onclick 이벤트를 가지는 Object는 자신의 고유작업을 합니다. 자신의 이벤트 헨들러만 document에게 돌립니다.

IE4는 Object의 같은 이벤트 헨들러를 상위에서 가지고 있어도 자신의 이벤트 헨들러를 빼앗기지 않습니다. 이것이 NN4와의 차이점입니다.

<a href="javascript:alert('HREF')" onClick="alert(Link Click); return false">Link</A>

위의 줄로 하면 어떻게 될까요? 링크 click 이벤트 헨들러에 return false를 지정했습니다.

[NN4] Capture Event -> HREF
[IE4] Link Click -> Capture Event

로 됩니다. IE4에서 HREF가 나오지 않는 이유는 먼저 발생한 링크의 click 이벤트 헨들러가 false를 반환했기 때문입니다.

NN4에서는 위의 경우와 같습니다. 즉, captureEvents()로 이벤트를 어떤 Object에게 지정하면, 그 Object 안의 모든 Object는 상위에서 captureEvents()한 것과 같은 종류의 자신의 이벤트를 상위에게 지정합니다. 따라서, 하위는 같은 이벤트 헨들러(지정된 함수)를 사용할 수 없습니다.

이 때, 자신의 이벤트 헨들러를 사용하기 위해서 routeEvent()라는 통로(route)를 열어주는 메소드를 사용합니다.

IE4에서는 지정하는 Object가 독립적이기 때문에, 각각 작동을 합니다. routeEvent가 IE4에서는 필요없고 지원하지 않습니다.

captureEvents()로 NN4는 상위, 하위가 같은 이벤트 헨들러를 가지고 있으면 하위의 이벤트 헨들러가 상위에게 종속 되지만, IE4는 종속되지 않습니다. NN4에서 captureEvents() 로 종속된 하위의 이벤트 헨들러(지정된 함수)를 제어하는 메소드가 있습니다. routeEvent(), releaseEvents(), handleEvent() 입니다.

NN4와 IE4의 상하위의 연결된 이벤트(captureEvents) 작동에서의 차이점은

(1) 순서가 반대다.
(2) 상, 하위에 같은 이벤트를 지정하면 NN4는 상위가 하위의 이벤트를 가지지만, IE4는 가지지 않는다.

크게 이 두 가지로 NN4와 IE4의 이벤트의 차이점입니다.

var NN4 = ( document.layers ) ? true : false;
var IE4 = ( document.all ) ? true : false;

function clickEvent(e) {                            // (1)
	alert("Capture Event"); 
	if ( NN4 )
		document.routeEvent(e);          // (2)
}

function capEvent() {
	if ( NN4 ) {
		document.captureEvents(Event.CLICK);
		document.onclick = clickEvent;
	}
	if ( IE4 ) document.onclick = clickEvent;
}
</script>
</head>

<body onLoad="capEvent()">
<a href="javascript:alert('HREF')" onClick="alert('Link Click')">Link</A>

[NN4] Capture Event -> Link Click -> HREF
[IE4] Link Click -> Capture Event -> HREF

주석 (2)번으로 NN4에서 하위의 같은 이벤트를 가진 Object에게 자신의 이벤트 헨들러를 사용할 수 있게 통로(route)를 열어 줬습니다. 그래서, 순서만 다르고 3개의 alert 창이 다 나옵니다.

여기서 주의깊게 봐야할 것은 상위, 하위가 같은 이벤트 헨들러(onclick)를 가지고 있을 때, 둘 다 실행이 되고 나서 Object(Link 링크)가 이벤트에 맞는 고유 작동을 합니다. NN4, IE4 둘 다 같은 점입니다.

링크택의 onClick에 return false;를 지정했습니다.

[NN4] Capture Event -> Link Click -> HREF
[IE4] Link Click -> Capture Event

여기서 IE는 링크의 onClick가 false를 반환하여 HREF는 나오지 않습니다.
NN4에서 routeEvent로 하위에게 이벤트를 사용하게 할 때, 하위의 이벤트는 작동 하지만, 하위의 반환값은 자신의 Object에 영향을 미칠 수 없습니다. 상위의 반환값 만이 자신의 작동여부를 결정할 수 있습니다.

var NN4 = ( document.layers ) ? true : false;
var IE4 = ( document.all ) ? true : false;

function clickEvent(e) {
	alert("Capture Event"); 
	if ( NN4 )
		document.routeEvent(e);
	return false;                                     // (1)
	return true;                                      // (2)
//	return 지정안함.                                  (3)
}

function capEvent() {
	if ( NN4 ) {
		document.captureEvents(Event.CLICK);
		document.onclick = clickEvent;
	}
	if ( IE4 ) document.onclick = clickEvent;
}
</script>
</head>

<body onLoad="capEvent()">
<a href="javascript:alert('HREF')" onClick="alert('Link Click')">Link</A>

	NN 4	IE 4
(1)	Capture Event->Link Click	Link Click->Capture Event
(2)	Capture Event->Link Click->HREF	Link Click->Capture Event->HREF
(3)	Capture Event->Link Click->HREF	Link Click->Capture Event->HREF

onClick="alert('Link Click'); return true"> 사용시 // (4)

	NN 4	IE 4
(1)(4)	Capture Event->Link Click	Link Click->Capture Event
(2)(4)	Capture Event->Link Click->HREF	Link Click->Capture Event->HREF
(3)(4)	Capture Event->Link Click->HREF	Link Click->Capture Event->HREF

onClick="alert('Link Click'); return false"> 사용시 // (5)

	NN 4	IE 4
(1)(5)	Capture Event->Link Click	Link Click->Capture Event
(2)(5)	Capture Event->Link Click->HREF	Link Click->Capture Event->HREF
(3)(5)	Capture Event->Link Click->HREF	Link Click->Capture Event

= 결론 = [ Event를 capture, route로 연결했을 때 ]

1. 이벤트의 순서는 NN4는 상위에서 하위로 IE4는 하위에서 상위로 서로 반대이다.

2. NN4는 상위가 하위의 이벤트 헨들러를 가지나, IE4는 가지지 않는다.

3. NN4, IE4 모두 상위 이벤트의 반환값은 하위 Object의 작동여부를 결정한다.

하위 이벤트의 반환값이 true 일지라도, 상위 이벤트의 반환값이 false 라면,
하위의 반환값은 자동으로 false가 된다. 또한, 하위의 반환값이 false라도
상위의 반환값이 true라면, 하위의 Object는 작동한다.

이 때, IE4에서는 상위의 반환값 return true 를 지정을 해야했다.
만약, 상위의 return 값이 없으면(return true, false를 지정하지 않으면) 하위의
반환값 만으로 하위의 작동여부를 결정한다.
NN4에서는 반환값을 지정하지 않으면 기본으로 return true이다. JavaScript1.1과 같다.

var NN4 = ( document.layers ) ? true : false;
var IE4 = ( document.all ) ? true : false;

function clickEvent(e) {
	alert("Capture Event"); 
	if ( NN4 )
		if ( document.routeEvent(e) )        // (1)
			return false;
		else return true;
}

function capEvent() {
	if ( NN4 ) {
		document.captureEvents(Event.CLICK);
		document.onclick = clickEvent;
	}
	if ( IE4 ) document.onclick = clickEvent;
}
</script>
</head>

<body onLoad="capEvent()">
<a href="javascript:alert('HREF')" onClick="alert('Link Click'); return true">Link</A>

routeEvent()는 route Event를 받은 Object(Link 링크)의 이벤트 반환값을 받습니다. Link 링크가 return true를 반환하면 위의 주석 (1)번은 참입니다. return false 나 return 이 없으면 거짓입니다. 이것으로 하위의 반환값으로 자신의 고유작업을 결정할 수 있습니다. 여기서 NN4는 HREF가 나오지 않습니다.

기본적으로 NN4에서는 택 안에서 이벤트를 정의할 때는 1. event, 2. this, 3. return true(false) 를 정의 해야지, 받은 이벤트 헨들러의 함수에서 이들을 사용할 수 있습니다. JavaScript로 정의할 때는 이들이 필요가 없습니다. 1, 2는 자동으로 가고 3.은 지정하지 않으면 return true입니다.

function eventTest(X, Y) { alert("Event type : "+X.type+" This Name : "+Y.name); }

var NN4 = ( document.layers ) ? true : false;
var IE4 = ( document.all ) ? true : false;

function dblclickEvent() { alert("Double Click"); }   //(1)
function clickEvent(e) {
	alert("Capture Event"); 
	if ( NN4 )
		document.routeEvent(e);
	return true;                                                   //(2)
}

function capEvent() {
	if ( NN4 ) {
		document.captureEvents(Event.CLICK | Event.DBLCLICK);
		document.onclick = clickEvent;
		document.ondblclick = dblclickEvent;    //(3)
	}
	if ( IE4 ) {
		document.onclick = clickEvent;
		document.ondblclick = dblclickEvent;     //(4)
	}
}
</script>
</head>

<body onLoad="capEvent()">
<a href="javascript:alert('HREF')" onClick="alert('Link Click')">Link</A>

주석 (3), (4)으로 click과 double click 둘을 document에게 사용하게 했습니다. Double Click는 마우스를 두번 연속해서 누르면 발생하는 이벤트입니다. click 다음에 이것이 일어납니다. 다른 Object에서는 Double Click이벤트가 일어납니다. 하지만, 링크는 click가 링크 Object의 동작을 결정합니다.

따라서 여기서는 NN4, IE4 둘 다 주석(1)번의 "Double Click"는 나오지 않습니다.

주석 (2)번이 return false라면 링크의 click이벤트를 취소해서 주석 (1)번의 "Double Click" 가 나옵니다.

왜냐하면, Double Click는 연속해서 마우스를 두 번 누르는 것입니다. alert창이 나오고 닫으면 시간이 걸려서 두 번째의 Click는 먹히지 않습니다.

그리고, href에 다른 문서를 연결해도 나오지 않습니다.
Double Click는 document의 이벤트이기 때문입니다. 링크의 href attribute는 새로운 document를 불러오는 것입니다. 즉, 최상위 Object, window Object가 바뀌었기 때문입니다.

! 현재의 페이지에 다른 페이지를 불러오면 모든 것은 끝납니다.

TOP Go to captureEvents return TOP