| CaptureEvents() | Go to Event Method |
즉, window, document, layer Object에 이것을 지정하면 이들 Object 전체에서 captureEvents한 이벤트를 사용할 수 있다는 말입니다. 페이지의 내부, 레이어의 전체 등에게 이벤트를 지정하면 그 이벤트에 대해서 모든 포함된 내용물이 captureEvents(이벤트)로 지정한 이벤트를 사용할 수 있습니다.
가령 onclick를 layer에게 captureEvents(CLICK)하면 layer의 내부 아무데나 마우스로 눌러도 이벤트가 호출 됩니다.
function click() {
alert("D1 레이어를 마우스로 눌렀습니다.");
}
function init() {
if(n4) {
document.D1.document.captureEvents(Event.CLICK);
document.D1.document.onclick = click
}
else if(e4) document.all.D1.onclick = click
}
</script>
</head>
<body onLoad="init()">
<div id=D1 style="position:absolute; left:200; top:100; width:200; height:200;
clip:rect(0,200,200,0); layer-background-color:yellow;">
<a href="#" onClick="alert('Link Clicked')">Link Click</a>
<p><form><input type=button value="폼 클릭" onClick="alert('Form Clicked')"></form>
</div>
실행 하기이제 D1이란 이름을 가진 layer전체에서 아무데나 마우스를 누르면 click()를 호출합니다.
이 때, layer 안의 링크나 다른 click이벤트 헨들러를 가지고 있는 Object는 onclick를 사용할 수 없습니다. 왜냐하면, 자신의 상위 layer가 click 이벤트를 capture했기 때문입니다. 링크나 폼은 모두 document object에 속하는 object입니다. document.link, document.form 입니다. 레이어는 document를 가질 수 있습니다. 레이어가 가질수 있는 document는 폼, 이미지, 링크, 레이어 등 window object가 가질 수 있는 것과 똑 같은 object들을 가질 수 있습니다. 이점에서 레이어(css-p)는 프레임과 개념이 같습니다.
ie4에서는 이 개념이 없습니다. 하위를 가질 수는 있지만 각 하위들은 독립적입니다. 자신을 가지고 있는 상위에 물리적으로 페이지에서의 위치는 상위에 포함되지만 하위와 상위는 둘 다 같은 상위 object, all 에 연결됩니다.
<html>
<head>
<style>
#L1 { position:absolute; left:200; top:100; width:200; height:200; clip:rect(0,200,200,0);
background-color:yellow; layer-background-color:yellow;
}
#L2 { position:absolute; left:50; top:50; width:100; height:100; clip:rect(0,100,100,0);
background-color:red; layer-background-color:red;
}
</style>
<script language="JavaScript">
n4 = (document.layers) ? true : false;
function parentClick() {
alert("상위 레이어");
}
function sonClick() {
alert("하위 레이어");
}
function init() {
if (n4) {
document.L1.document.onclick = parentClick;
document.L1.document.L2.document.onclick = sonClick;
}
else {
document.all.L1.onclick = parentClick;
document.all.L2.onclick = sonClick;
}
}
</script>
</head>
<body onLoad="init()">
<div id=L1>L1
<div id=L2>L2</div>
</div>
</body>
</html>
실행 하기상위의 레이어와 하위의 레이어의 document에게 각각 click 이벤트 헨들러를 지정했습니다. captureEvents()를 지정하지 않았습니다. nn4의 경우 각각의 이벤트가 따로 실행합니다. ie4의 경우는 상위에서 이벤트를 실행하면, 즉 노란색 바탕을 누르면 상위의 이벤트를 실행합니다. 하위의 이벤트 즉, 빨강색을 누르면 하위의 이벤트를 실행하고 그리고 자신을 포함하고 있는 상위의 이벤트를 실행합니다.
상하위가 같은 이벤트를 가지고 있을 때, ie4는 자신과 자신을 가지고 있는 상위의 이벤트도 실행을 합니다. 하지만, nn4는 오직 자신의 이벤트만 실행을 합니다. 여기서 ie4처럼 두 이벤트를 연계해서 사용할 때 captureEvents()를 사용합니다. ie4는 상위에 이벤트를 지정하면 자동으로 nn4의 capturEvents()를 지정한 것과 같은 작동을 합니다. 선택의 여부가 없습니다.
function init() {
if (n4) {
document.L1.captureEvents(Event.CLICK)
document.L1.onclick = parentClick
document.L1.document.L2.document.onclick = sonClick
}
else {
document.all.L1.onclick = parentClick
document.all.L2.onclick = sonClick
}
}
실행 하기위의 init()함수에서 nn4에게 L1 레이어에게 click 이벤트를 captureEvent()를 지정했습니다. nn4에서 captureEvents()는 window, document, layer의 method입니다. 따라서, L1.captureEvents(), L1.document.captureEvents()로 둘 다 사용할 수 있습니다. (두 가지의 차이점이 조금 있습니다. 아래에서 설명을 하죠..)
실행하면 ie4는 다른 점이 없습니다. nn4는 상위에서 click 이벤트를 captureEvents()해서 하위의 같은 이벤트는 나오지 않습니다. 상위의 레이어가 가지고 있는 모든 element의 click를 parentClick()에 지정을 해서 그렇습니다.
captureEvents()는 단순히 하위의 이벤트를 가로채 갑니다. 그 가로챈 하위의 이벤트를 자신의 이벤트 지정함수로 바꾸어서 지정된 함수 parentEvent()를 실행합니다. 즉, 하위의 이벤트 헨들러에 지정한 함수를 가로채 갑니다. 위의 sonClick()를 말입니다. 만약 레이어 L2가 click이벤트에 지정된 고유의 작업이 있다면 그것은 실행을 합니다. 다만, 이벤트 헨들러에 지정한 sonClick()만 상위가 가져 갑니다. 레이어에게는 특정한 작업이 없습니다. 단순히 몇개의 element를 포함할 수 있는 block element입니다. 하위레이어 L2에게 링크가 있다면 그 링크는 지정된 작업을 수행합니다. 링크의 고유작업은 연결된 문서를 불러오는 것입니다. 즉, 연결된 문서로 이동합니다. (혼란스럽죠. 아직 많이 남았어요.. :)
<div id=L1>L1
<div id=L2>
L2
<a href="javascript:alert('HREF')" onClick="alert('링크 이벤트')">링크</a>
</div>
</div>
실행 하기하위 레이어 L2에 링크를 넣었습니다. 이 링크의 이벤트 헨들러도 나오지 않습니다. 링크는 레이어 L2에 속하고 L2는 상위 레이어 L1에게 포함되기 때문입니다. 따라서 L2 레이어의 모든 click 이벤트를 가지는 Object의 click 이벤트 헨들러는 호출되지 않습니다. 나오지 않습니다. 다만, 자신의 고유작업만 합니다. 그래서 href에 지정된 문서 alert('HREF')만 나옵니다. ie4의 경우는 다 나옵니다. 그리고 HREF가 마지막에 나옵니다. 이것은 ie4, nn4 둘 다 같은 점입니다. (심봤다~ :) 즉, 하위 상위가 같은 이벤트를 가지고 있을 때 이벤트를 다 수행하고 고유작업을 합니다. 어떤 Object의 이벤트는 그 object의 실행 전에 일어난다는 JavaScript의 기본에 포함됩니다.
document.L1.document.L2.document.links[0]L1.captureEvents(Event.CLICK)로 click 이벤트가 미치는 범위는 굵은 글자입니다. 모든 하부의 이벤트는 자신의 이벤트를 사용하지 못하고 상위에서 지정한 이벤트를 사용합니다.
여기서 nn4에게 하위의 레이어의 이벤트를 사용할 수 있게 하는 것이 routeEvent()입니다. 상위가 이벤트를 captureEvents()했을 때, 같은 이벤트를 가지는 하위의 이벤트를 실행할 수 있게 해줍니다. 이 routeEvent()는 captureEvents()로 capture한 이벤트의 이벤트 헨들러의 지정함수 parentClick() 안에서 실행해야 합니다.
function parentClick(e) {
alert("상위 레이어")
this.routeEvent(e)
}
nn4에서 상하위의 이벤트를 captureEvents(), routeEvent()로 연결 했을때, routeEvent()를 상위의 이벤트 헨들러의
지정함수에서 사용하므로, 이벤트의 실행순서가 상위 -> 하위가 됩니다. 이제 하위 레이어를
누르면 상위의 이벤트를 실행하고 하위 레이어의 이벤트를 실행합니다. 즉, sonClick()함수가 호출됩니다.
하위 레이어의 링크를 누르면 상위의 레이어 이벤트는 일어 나는데, 자신을 가지고 있는 하위의 레이어 L2의 이벤트는 일어나지 않습니다. 여기서 nn4와 ie4의 레이어 에서의 차이점입니다. ie4는 각각의 레이어를 독립적인 Object로 보지만, nn4는 레이어는 하나의 새로운 창입니다. 즉, 자신이 document를 가질수 있는 창이라고 말할수 있습니다.
L2 레이어와 포함하고 있는 링크는 맨 처음 예 에서 처럼 각기 이벤트를 지정한 상황입니다. 링크는 L1 레이어의 document인 L2레이어의 document.link입니다. 계층이 두 단계입니다. 그래서, 하위의 레이어에서도 지금까지와 같이 L2 레이어도 captureEvents() 해주어야 L2 레이어의 click 이벤트가 호출됩니다. 복잡하다고 할수도 있지만, 더 세밀한 이벤트 조절을 할 수 있습니다. 즉, 하위의 레이어는 상위의 레이어의 document입니다.
document.L1.document.L2.document.links[0]굵은 글씨가 L1 레이어의 captureEvents(Event.CLICK)의 범위입니다. L1 레이어의 하부 모두에게 범위가 미칩니다. 레이어의 하부가 어디까지 인가요? 레이어는 document를 가질 수 있습니다. document 는 form, 링크 등 페이지에 있는 것들입니다. 일종의 프레임 이라고 말할 수 있는 레이어 자기 자신이 가지고 있는 것들입니다. 따라서 레이어가 하위에 레이어를 가지고 있을 때, 하위 레이어는 상위 레이어의 document에 포함이 됩니다. 하지만, 하위레이어가 가지고 있는 document는 상위 레이어의 document가 아닙니다.
document.L1.document.L2.document.links[0]하위 레이어가 가지고 있는 것들이 빨간색에 있습니다. 상위 레이어 L1의 captureEvents(Event.CLICK)의 범위인 굵은 글자 봐ㄲ에 있습니다. L2 레이어는 상위 레이어에 포함되지만 하위 레이어 L2가 가지고 있는 링크나 폼같은 document는 상위에 포함되지 않습니다. (이미지를 눌렀을 때는 아무런 반응이 없죠..? 잠시만요.. 밑에 있어요..)
즉, captureEvents()로 했을 때는 계층에 상관없이 이벤트를 capture합니다. 그리고, routeEvent()로 하부에게 이벤트 통로를 열어주면 하부의 레이어가 가지고 있는 document는 또다른 창인 하부레이어의 document입니다. routeEvent()를 지정하면 captureEvents()로 레이어 계층에 상관없이 captureEvents()된 이벤트를 하부에게 열어주는 것과 동시에 원래의 계층을 복구합니다. 그래서, 하부레이어의 document는 상위의 captureEvents()로 빼앗긴 이벤트를 하위레이어의 document로 작동합니다. 보통 captureEvents()와 routeEvent() 둘 다 같이 사용합니다. 둘 다 사용하면 ie4의 상하위 이벤트를 사용하는 것과 순서는 반대이지만, 같은 동작을 합니다.
하위레이어를 하나씩 가지고 있는 레이어에서 한쪽은 상위레이어에서 captureEvent()만 하였고 다른 한쪽은 captureEvents()와 routeEvent()를 하였습니다.
NN4에서 레이어가 가지고 있는 것은 레이어의 document입니다. 레이어는 다른 레이어를 가질 수 있습니다. 이 때, 상위레이어와 하위레이어는 계층으로 나뉘어집니다. 여기서 상위레이어에서 captureEvents()는 이 계층을 무시하고 상위레이어가 가지고 있는 모든 object에게 captureEvents()를 합니다. 하위레이어의 링크같은 document도 같이 captureEvents() 합니다. 여기서 상위레이어에게 routeEvent()를 지정하면 원래의 계층을 복구합니다. 이제 상위의 document와 하위의 document는 서로 다른 object입니다.
function parentClick(e) {
if (n4) this.routeEvent(e);
alert("상위 레이어");
}
위로 하면 하위의 이벤트 헨들러 지정함수를 먼저 실행합니다. 즉, Object.routeEvent(e)를 만나면 바로 통로가 열리고 하위의
이벤트 헨들러의 지정함수를 호출합니다. 일반적으로 상하위의 이벤트를 연결했을 때, nn4는 상위 -> 하위이고 ie4는
하위 -> 상위이지만, routeEvent()와 실행 코드의 순서로 nn4에서 상하위의 이벤트 헨들러에 지정된 함수의 순서를 바꿀수 있습니다.
ie4에서도 하위에서 setTimeout()를 사용하면 실행순서를 반대로 할 수 있습니다. 하지만, setTimeout()는
시스템에 따라서 가변적입니다. 사용자의 PC, 환경에 따라서 실행 시간이 유동적입니다. 시간을 충분히 주어야 합니다.
이것과 routeEvent()의 반환값으로 다양한 제어를 할 수 있습니다.
n4 = (document.layers) ? true : false;
function parentOver() {
alert("상위 레이어");
}
function sonOver() {
alert("하위 레이어");
}
function init() {
if (n4) {
document.L1.onmouseover = parentOver;
document.L1.document.L2.onmouseover = sonOver;
}
else {
document.all.L1.onmouseover = parentOver;
document.all.L2.onmouseover = sonOver;
}
}
</script>
</head>
<body onLoad="init()">
<div id=L1>L1
<div id=L2>L2</div>
</div>
실행 하기
위의 click 이벤트와 비슷합니다. ie4는 자동으로 nn4의 captureEvents(Event.MOUSEOVER), routeEvent(e)를 지정한 것과 같습니다. nn4는 여기서 상위레이어, 하위 레이어가 다 각기 따로따로 MOUSEOVER가 일어납니다.
function parentOver(e) {
alert("상위 레이어");
if (n4) this.routeEvent(e);
}
function init() {
if (n4) {
document.L1.captureEvents(Event.MOUSEOVER)
document.L1.onmouseover = parentOver;
document.L1.document.L2.onmouseover = sonOver;
}
else {
document.all.L1.onmouseover = parentOver;
document.all.L2.onmouseover = sonOver;
}
}
실행 하기이제 nn4에서도 상하위의 레이어의 이벤트가 일어납니다. 순서는 반대 입니다. 한 가지 차이점은 하위에서 상위로 마우스를 옮기면 nn4는 상위의 MOUSEOVER 이벤트가 발생하지 않는데, ie4는 발생합니다. ie4는 각 레이어가 독립적입니다. 그래서, 일어납니다. 반면에, nn4는 하위는 상위의 document입니다. 상위에 종속되기 때문에 하위에서 상위로 가도 상위 자신이기 때문입니다.
function init() {
if (n4) {
document.L1.document.captureEvents(Event.MOUSEOVER)
document.L1.document.onmouseover = parentOver;
document.L1.document.L2.document.onmouseover = sonOver;
}
else {
document.all.L1.onmouseover = parentOver;
document.all.L2.onmouseover = sonOver;
}
}
실행 하기이번에는 nn4에서 레이어의 document에 지정을 했습니다. 여기서 오직 하나의 이벤트만 일어납니다. 바로 하위레이어의 MOUSEOVER입니다. 상위레이어는 자신의 document에 지정을 했습니다. 그래서, captureEvents(Event.MOUSEOVER)가 미치는 범위는
document.L1.document.L2.document에서 굵은 글자입니다. document object는 mouseover, mouseout 이벤트가 없습니다. 그래서 오직, 하위 레이어에 마우스를 가져갔을 때, captureEvents()한 상위의 이벤트가 일어납니다. 하위레이어에게도 document에 이벤트를 지정해서 하위레이어에서 MOUSEOVER 이벤트가 일어나지 않습니다.
한번 더 강조하면 레이어는 document를 가질 수 있습니다. 그 document에는 레이어도 포함이 됩니다. 그래서, 상위레이어가 document로 가지고 있는 하위레이어 에서만 MOUSEOVER 이벤트가 일어납니다.
여기서의 이벤트를 모두 CLICK로 바꾸면 이 예제와 같습니다. document.L1.document.captureEvents(Event.CLICK) 와 onclick로 했을 때의 이벤트가 미치는 범위도 위의 굵은 글자와 같습니다. captureEvents()는 window, document, layer 의 함수 입니다. 그래서 layer나 document에게 둘 다 지정할 수 있습니다. 그리고, 레이어는 document를 가질 수 있고 각 object는 지정된 이벤트가 있습니다.
1. document.레이어.captureEvents(Event.CLICK) documnet.레이어.onclick=clickFunction 2. document.레이어.document.captureEvents(Event.CLICK) documnet.레이어.document.onclick=clickFunction레이어와 document에게 captureEvents()를 지정했습니다. 둘 다 유효한 코드입니다. 이 경우 레이어와 레이어의 document에게 click 이벤트를 captureEvens()합니다. 레이어에게는 click 이벤트가 없습니다. 따라서 이 경우는 똑 같은 동작을 합니다. 레이어는 document를 가질 수 있으므로 위의 1번 코드는 자동으로 2번 코드와 같이 지정됩니다. 다만, click 이벤트의 지정함수인 clickFunction() 안에서 this는 1번 코드는 레이어이고 2번 코드는 레이어.document입니다. 많은 경우 이벤트 지정함수 안에서 레이어를 참조하여 동적인 페이지를 만듭니다.
레이어의 document는 레이어.document로 접근이 가능합니다. 하지만, 레이어.document에서는 자신의 레이어를 참조할 방법이 없습니다. 효율적인 코드와 간단한 코드를 만들기 위해서 레이어를 참조하기 위해 항상 1번 코드를 사용하세요.
1. document.레이어.captureEvents(Event.MOUSEOVER) documnet.레이어.onmouseover=overFunction 2. document.레이어.document.captureEvents(Event.MOUSEOVER) documnet.레이어.document.onmouseover=overFunction이번에는 위의 코드를 모두 MOUSEOVER로 지정했습니다. 이것도 둘 다 유효한 코드입니다. 2번 코드에서 레이어에 마우스를 올려도 overFunction은 실행하지 않습니다. document에는 mouseover 이벤트가 없기 때문입니다.
즉, 레이어의 이벤트인 mouseover, mouseout 2개 외에 click, mousedown 같은 document의 이벤트는 captureEvens()로 이벤트를 지정할 때, 레이어나 레이어의 document에서 같은 동작을 합니다. 다만, 이벤트 헨들러에 지정한 함수 안에서 this로 사용할 수 있기 위해서 레이어에 captureEvents()를 지정하는 것이 효과적입니다. 레이어에 지정하면 레이어는 document의 이벤트를 지원하지 않으므로 무시하고 레이어가 가지고 있는 document에게 그 이벤트를 지정하기 때문입니다. 지원하지 않는 이벤트는 무시합니다. 에러는 나지 않습니다.
function parentClick(e) {
alert("상위 레이어");
if (n4) this.routeEvent(e);
}
function sonClick() {
alert("하위 레이어");
}
function init() {
if (n4) {
document.L1.captureEvents(Event.CLICK);
document.L1.onclick = parentClick;
document.L1.document.L2.document.onclick = sonClick;
}
else {
document.all.L1.onclick = parentClick;
document.all.L2.onclick = sonClick;
}
}
</script>
</head>
<body onLoad="init()">
<div id=L1>L1 <img src="../../images/ball.gif">
<div id=L2>
L2 <p>
<a href="javascript:alert('HREF')" onClick="alert('링크 이벤트')">링크</a>
</div>
</div>
상하위의 레이어에게 captureEvents(Event.CLICK)와 routeEvent(e)로 click 이벤트를 지정했습니다. 그리고 이미지와 링크를 넣었습니다. 이미지와 링크를 눌럿을 때, 반응이 다릅니다. 레이어에게 지정할 수 있는 이벤트는 MOUSEOVER, MOUSEOUT 두 개 뿐입니다. 레이어가 가지고 있는 document에는 click 이벤트를 지정할 수 있습니다. NN4에서는 링크에는 click 이벤트가 있지만, 이미지에는 click 이벤트가 없습니다.
이 페이지 맨 첫째줄에서 captureEvents(이벤트)는 이벤트의 범위를 지정한다고 했습니다. 이 captureEvents(지정 이벤트)로 window, document, layer 에게 이들이 가지고 있는 모든 object에게 지정 이벤트를 지정합니다. captureEvents(이벤트)는 어떤 object에게 없는 이벤트를 지정하는 것이 아닙니다. window, document, layer가 가지고 있는 object 중에서 특정 이벤트를 가지고 있는 object에게 captureEvents(지정 이벤트)로 이벤트를 지정하는 것입니다. 링크 object는 click 이벤트를 지원합니다. 하지만, nn4는 이미지는 click 이벤트를 지원하지 않습니다. 그래서, L1 레이어의 이미지를 누르면 아무 반응이 없는 것입니다. (참조하기)
document.L1.document.captureEvents(Event.CLICK); document.L1.document.onclick = parentClick;위의 코드로 해도 결과는 마찬가지 입니다.
function init() {
if (n4) {
document.L1.document.captureEvents(Event.MOUSEOVER)
document.L1.document.onmouseover = parentOver;
document.L1.document.L2.onmouseover = sonOver;
}
else {
document.all.L1.onmouseover = parentOver;
document.all.L2.onmouseover = sonOver;
}
}
<div id=L1>L1 <a href="#">링크</a>
<div id=L2>L2</div>
</div>
실행 하기위에 굵은 줄에서 처럼 레이어의 document에 MOUSEOVER 이벤트를 captureEvents(Event.MOUSEOVER)를 지정했습니다.
이번에는 L1 레이어의 노란색 바탕에 마우스를 올려도 L1의 mouseover 이벤트 헨들러의 함수는 나오지 않습니다. 왜냐하면 레이어.document 에 captureEvents(Event.MOUSEOVER)를 지정했기 때문입니다. 노란색 바탕은 레이어 자신을 말하고 레이어 안의 이미지나 링크는 레이어의 document이기 때문입니다. nn4에서 MOUSEOVER, MOUSEOUT는 레이어에서만 지원하는 이벤트 입니다. document는 지원하지 않습니다.
여기서 상위레이어 L1에 mouseover 이벤트를 지정하지 않은 링크를 하나 넣어주면 이 링크도 상위에서 captureEvents()에 지정한 함수를 실행합니다. link는 레이어의 document이기 때문입니다. ie4도 링크가 실행을 합니다. captureEvents()를 하는 방법은 다르지만 기능은 같습니다.
링크에 미리 지정한 mouseover 이벤트 지정함수가 없었습니다. captureEvents(Event.MOUSEOVER) 로 함수를 지정해서 그 함수가 나오는 것입니다.
즉, captureEvents(), routeEvent()로 레이어와 레이어 자신이 가지고 있는 내용물에 이벤트를 연결했을 때, 하위의 내용물이 지정되어 있는 이벤트가 없더라도 상위의 이벤트와 같은 이벤트를 가질수 있으면 상위의 이벤트를 실행합니다. 그리고 자신의 이벤트도 가지고 있다면 그것도 같이 실행을 합니다. 즉, 하위의 내용물 모두에게 지정한 이벤트를 지정합니다. 하위가 그 이벤트를 사용할 수 있는 object라면 실행을 하고 사용할 수 없는 이벤트라면 무시합니다. nn4, ie4가 같은 점입니다.
<img src="images/IMG.jpg" onClick="alert('이미지 Click Event')">
위의 줄은 nn4에서 에러가 나지 않습니다. 지원하지 않는 이벤트는 무시될뿐 에러는 나지 않는 것과 같다고
할 수 있습니다. 즉, 아래의 두 줄은 서로 같다고 할 수 있습니다.
document.L1.captureEvents(Event.CLICK) document.L1.document.captureEvents(Event.CLICK);이것은 이벤트가 CLICK입니다. 레이어는 click 이벤트가 없습니다. 따라서 레이어의 click 이벤트는 무시되고 아래의 document에서 click 이벤트를 지원하는 링크나 폼의 click 이벤트만 captureEvents()합니다. 따라서, 둘은 똑 같습니다.
하지만, MOUSEOVER나 MOUSEOUT는 서로 다릅니다. 레이어가 지원하는 이벤트이기 때문입니다.
document.L1.captureEvents(Event.MOUSEOVER) document.L1.document.captureEvents(Event.MOUSEOVER);이것에서 위의 줄은 레이어에게도 하위의 모든 Object에게도 MOUSEOVER 이벤트를 capture 합니다.
결론
captureEvents()로 어떤 이벤트를 Object에게 지정하면 그 Object가 가지고 있는 모든 Object에게 이벤트를 capture한다. 이 때, 지원하지 않는 Object의 계층은 무시되고 하위로 내려간다. ie4의 경우 순서는 하위에서 상위로 올라간다.그리고, 상하위의 모든 이벤트를 수행하고 object의 고유동작을 한다. 이 때, 상하위의 이벤트 헨들러의 반환값으로 object의 실행여부를 결정할 수 있다.
function parentOver(e) {
alert("상위 레이어");
if (n4) this.routeEvent(e);
}
function sonOver() {
alert("하위 레이어");
}
function init() {
if (n4) {
document.L1.captureEvents(Event.MOUSEOVER)
document.L1.onmouseover = parentOver;
document.L1.document.L2.onmouseover = sonOver;
}
else {
document.all.L1.onmouseover = parentOver;
document.all.L2.onmouseover = sonOver;
}
}
<div id=L1>L1 <a href="#">링크</a> <img src="../../images/ball.gif">
<form><input type=button value="BB"></form>
<div id=L2>L2
</div>
</div>
실행 하기captureEvents(A이벤트)는 하위의 object에게 A이벤트로 어떤 함수를 지정하여 줍니다. nn4에서 링크는 mouseover 이벤트를 지원하지만, 이미지나 폼의 단추(button)는 mouseover를 지원하지 않습니다. captureEvents(Event.MOUSEOVER)로 mouseover 이벤트를 이미지나 폼의 단추에 capture하면 이미지와 단추도 함수를 지정받을 수 있습니다. 하지만, captureEvents(Event.CLICK)로 이미지는 click 이벤트를 지정할 수 없습니다.. 버그인지 예외인지는 모르겠습니다. (참조하기)
많은 조언을 부탁드립니다..