Position element Design

상하위를 captureEvents(), routeEvent()없이 각기 이벤트 지정했을 때의 반환값

어떤 Object에게 이벤트를 지정할 때, Object에 지정된 이벤트 헨들러는 반환 값을 가집니다. 반환값이 TRUE라면 그 이벤트에 맞는 동작을 하고, FALSE라면 그 동작을 취소합니다.

function returnValue() { return false; }
<a href="JavaScript:alert('Return Value is TRUE')" onClick="return returnValue()">Click me</a>

링크가 가지고 있는 이벤트 중에서 CLICK는 다른 문서로 이동하는 것입니다. 위의 링크를 누르면 Click 이벤트가 발생하는데, 이 onClick 이벤트 헨들러에 returnValue() 함수를 지정했습니다.

이 이벤트 헨들러의 반환값이 링크의 동작여부를 결정합니다. 여기서는 false를 반환 했습니다. 따라서, 링크의 HREF에 지정된 것은 작동하지 않습니다. returnValue 함수에 return true를 지정하면 이제 "Return Value is TRUE"를 alert 창이 보여줍니다.

위의 두 줄을 이렇게 할 수도 있습니다.

function returnValue() { return true; }
<a href="JavaScript:alert('Return Value is TRUE')" onClick="returnValue(); return false">Click me</a>

onClick="returnValue(); return false">로 택안에서 return false를 지정했습니다.

이 때는 returnValue()의 반환값에 상관없이 택 안에서 반환된 이벤트 헨들러의 반환값이 동작 여부를 결정합니다. 따라서, returnValue()의 반환값이 true이든 false든 무조건 false를 반환합니다. 하지만, 여러 조건에서 그에 맞는 반환값이 필요할 때는 맨 위의 방식을 주로 사용합니다. 즉, 이벤트의 반환값에 따라 그 object의 실행여부를 결정하기 위해서는 이벤트헨들러=return 함수 로 사용합니다.

<script language="JavaScript">
function docClick() { 
	docOut += " Document-Click ";
	//(0) return false;
}
function docMouseDown() { 
	docOut += "Document-Down "; 
	//(1) return false; 
} 
function set() {

	document.onclick=docClick;
	document.onmousedown = docMouseDown;
}
function linkClick() { 
	linkClick2 = "ON"; 
	linkOut += " Click : "+linkClick2; 
}
function linkMouseDown() { 
	linkMouseDown2 = "ON"; 
	linkOut += "Down : "+linkMouseDown2; 
}
function linkHref() { 
	linkHref2="ON"; 
	linkOut += " HREF : "+linkHref2; 
}

linkClick2=linkMouseDown2=linkHref2="OFF"; 
linkOut=docOut="";

</script>
</head>
<body onLoad="set()">
<a href="javascript:linkHref()" 
     onClick="linkClick()" 
     onMouseDown="linkMouseDown()">Link</A>        //(2) return false;

<a href="#" onMouseOver="alert(linkOut)">Link Result</a>
<a href="#" onMouseOver="alert(docOut)">Document Result</a>

Link 택을 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
Link-Down Link-Click Link-Href		Link-Down Link-Click Link-Href	Document-Down Document-Click
Document, Link Object에게 MouseDown, Click을 둘 다 지정하고 실험했을 때의 결과입니다. Link 링크를 누르고 Link Result, Document Result 로 각각 확인해 봤습니다. link는 document의 하위 Object입니다. 상위와 하위가 같은 이벤트를 가지고 있을 때, 하위의 이벤트를 실행한 결과입니다. NN4와 IE4의 차이점은 IE4는 상하위의 이벤트가 다 일어 나는데 반하여, NN4는 하위의 이벤트만 일어납니다.

페이지의 빈공간 즉, document 아무곳을 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
	Document-Down Document-Click		Document-Down Document-Click
상위(Document)를 눌렀으므로 상위의 이벤트만 일어납니다.

주석 (2)번 onMouseDown="linkMouseDown(); return false">로 하고 Link 택을 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
Link-Down		Link-Down Link-Click Link-Href	Document-Down Document-Click
NN4에서 Click은 mouseDown->mouseUp->Click입니다. IE4도 이 순서는 같습니다. 하위의 mouseDown이 false를 반환하여 Click이벤트를 취소 했습니다. click 이 일어나지 않았으므로, 당연히 링크의 고유작업은 취소가 되서 Link-Href도 나오지 않습니다. IE의 경우 연속된 이벤트가 일어날 때, 중간 이벤트의 반환값에 상관하지 않습니다.

주석 (2)번으로 하고 Document를 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
	Document-Down Document-Click		Document-Down Document-Click
상위만 눌렀으므로, 하위의 이벤트는 일어나지 않습니다.

주석 (1)번 return false를 넣고 Link 택을 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
Link-Down Link-Click Link-Href		Link-Down Link-Click Link-Href	Document-Down Document-Click
NN4는 하위만 실행해서 IE4는 중간 이벤트의 반환값은 뒤의 이벤트의 실행여부에 상관이 없으므로..

주석 (1)번 return false를 넣고 Document를 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
	Document-Down		Document-Down Document-Click
NN4에서 document에서도 mouseDown의 반환값은 Click 이벤트의 실행여부를 결정한다. IE4는 document도 mouseDown은 Click에 영향을 미치지 않는다.

주석 (1)번, (2)번 다 return false를 넣고 Link를 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
Link-Down		Link-Down Link-Click Link-Href	Document-Down Document-Click
NN4는 하위만 일어나고 mouseDown이 false를 반환하여 Click이벤트가 취소됨. IE4는 상하위 두 군데에서 일어나고 반환값에 상관하지 않으므로 모두 다 실행한다.

주석 (1)번, (2)번 다 return false를 넣고 Document를 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
	Document-Down		Document-Down Document-Click
상위에서만 이벤트를 다룬다. 위의 모든 경우 IE4에서만 지원하는 returnValue를 사용해도 결과는 같았다. IE4의 경우 return false 대신 event.returnValue=false 를 지정해도 결과는 같다.

[결론] : 상위, 하위가 같은 이벤트를 가지고 있을 때.

1. 이벤트가 둘 다 동시에 일어났을 때, 이벤트가 일어나는 순서는
NN4는 하위에서만 일어나고
IE4는 하위에서 먼저 일어나고 상위에서 둘 다 일어난다.
2. 중간 이벤트의 반환값은
NN4에서 중간 이벤트의 반환값은 뒤의 이벤트의 작동에 영향을 미치나 IE4에서는 미치지 않는다.
(double Click는 mouseDown, mouseUp이 false를 반환해도 나왔습니다. 중간 이벤트가 다음 이벤트에 영향을 미치는 것은 Click, KeyDown, KeyPress만 확인했습니다.)

주석 (0)번에 return false를 넣고 Link를 누르고 아래의 두 개의 링크로 확인시

NN 4		IE 4
Link Result	Document Result	Link Result	Document Result
Link-Down Link-Click Link-Href		Link-Down Link-Click	Document-Down Document-Click
NN4에서는 하위만 일어나므로 상위 Click의 반환값은 상관이 없습니다. IE4에서 상위의 Click 이벤트 헨들러의 반환값이 false을 반환하니 하위의 반환값이 false가 아니라도 하위의 click 이벤트의 고유작동, Href가 나오지 않습니다. 즉, IE4에서 상위의 반환값은 하위의 반환값을 대치합니다. 상위가 하위의 작동여부를 결정할 수 있습니다. NN4에서도 captureEvents를 하면 이 때의 IE4와 상황이 같습니다.. event2를 계속 보세요..

TOP Go to captureEvents return TOP