Position element Design

routeEvent()

routeEvent()는 상위에서 captureEvents()한 이벤트를 상위가 가지고 있는 하위에게 같은 이벤트를 가지고 있는 object에게 object 자신의 이벤트를 실행하게 합니다. 그리고, 하위를 원래의 개층으로 복귀시킨다. 여러층을 가진 레이어에서 가장 상위의 레이어에서 부터 가장 하위의 레이어까지 captureEvents()와 routeEvent()를 지정하면 ie4의 개별적인 지정방법과 같은 동작을 합니다. 순서는 반대지만 말입니다. 그리고, captureEvents()나 routeEvent()를 지정하느냐 하지않느냐에 따라서 다른 동작을 합니다.

<div id=div1>
	<a href="javascript:alert('HREF')" onClick="alert('LINK')">LINK</a>
</div>

<script language="JavaScript">
function divClick(e) {                        //(1)
	alert("DIV1 Clicked");
	this.routeEvent(e);                   //(2)
	return false;                             //(3)
}
document.div1.document.captureEvents(Event.CLICK)
document.div1.document.onclick = divClick;
</script>

routeEvent()는 어떤 Object에서 특정 이벤트를 captureEvents 했을 때, 하위의 같은 종류의 이벤트를 가진 Object의 이벤트 헨들러를 실행할 수 있게 합니다. 위의 주석(2)번이 이것입니다.

이것을 지정하지 않으면 div1 CSS Layer 안의 LINK 링크 택의 alert('LINK') 창은 상위에서 captureEvents를 했기 때문에 나오지 않습니다. 이것을 넣어주면 div1의 이벤트헨들러, "DIV1 Clicked" alert창이 먼저 실행되고 링크의 alert('LINK') 창이 나옵니다.

주석(3)번의 return false는 Object의 작업을 취소합니다. 여기서 Object는 div1 layer입니다. 따라서 하위의 링크 택의 return의 값도 자동으로 return false;가 됩니다. 따라서 링크택의 alert('HREF')는 나오지 않습니다.

routeEvent(e)가 지정되면 routeEvent()에 의해서 일어난 하위 Object의 이벤트의 반환값이 반환됩니다. 링크택 안에 onClick="...; return true">가 있으면 routeEvent(e)는 TRUE 값을 반환합니다.

즉, 주석(2)번을 if ( document.div1.routeEvent(e) ) 로 해보면 TRUE를 반환합니다. 어떤 제어에 사용할 수 있습니다. 또는 (2)번을 var flag = document.routeEvent(e); 하면 routeEvent 받은 이벤트가 return true이면 flag는 true이고, 그렇지 않으면 false입니다. 이 flag로 divClick 함수의 반환 값을 조정할 수 있습니다.

routeEvent()지정시 captureEvents()를 지정한 Object만 routeEvent()를 지정할 수 있습니다. 다르거나 captureEvents() 없이 routeEvent()를 실행시 계속 captureEvents에서 지정한 함수를 호출합니다. (Ctrl-Alt-Del 키로 꺼야합니다.)

TOP Go to UP TOP