| Event 순서와 지정하기 | Go to Event |
이벤트 순서 확인하기 | |
NN4 layer에서 이벤트를 선언 시 position element는 </div>택 다음에 <script></script>에서 선언합니다. JavaScript로 어떤 이벤트를 가질 수 있는 Object에 이벤트 헨들러를 지정할 때는 그 Object가 페이지에 먼저 출력(load)되어 있어야 합니다. 순서로 하면..
<div>CSS LAYER</div> <script>LayerObject.이벤트헨들러 = 지정함수</script>입니다.
layer 하나만 지정할 때는 이렇게 할 수 있지만, layer가 자신이 layer를 가지고 있다면, 가장 상위의 layer는 이렇게 이벤트 헨들러를 지정할 수 있는데, 내부의 layer는 이렇게 할 수 없습니다. 즉, 아래의 코드는 안됩니다.
1. <div id=parentLayer>parentLayer 2. <div id=sonLayer>sonLayer</div> 3. <script>document.parentLayer.document.sonLayer.onmouseover=someFunction</script> 4. </div> 5. <script>document.parentLayer.onmouseover=someFunction</script>3번 줄이 왜 안되냐 하고 생각 하다가 제가 내린 결론은, layer가 가지는 모든 Object는 layer의 document입니다. 그리고, document는 window의 Object입니다. document는 window 밑의 Object이기 때문에 window가 출력되고 난 다음 document가 옵니다. layer도 하나의 창(window)이기 때문에 창이 다 출력되어야 내부의 document를 출력할 수 있습니다. 즉, </div>로 창이 다 출력되고 나서야 layer가 가지는 document(위의 sonLayer)의 이벤트를 설정할 수 있습니다.
..라고 생각 했는데, 이것은 BUG라는 말도 있고 원래 그렇다는 말도 있습니다. :)
버그라면 가장 심각한 버그인듯.. 물론 해결책은 있습니다.
결론은 layer를 가지고 있는 layer가 출력될 때는 가장 상위의 layer(위의 parentLayer)만 이벤트 헨들러 onmouseover, onmouseout 두 개를 가질 수 있지, 내부의 어떤 document도 이벤트 헨들러를 설정할 수 없습니다. layer의 두 이벤트 mouseOver, mouseOut 그리고 body 택의 onLoad 이벤트로 이 문제를 극복할 수 있습니다.
IE4는 하위의 layer에게도 지정할 수 있습니다. 따라서, 이 페이지는 주로 NN4에서 이벤트헨들러를 지정하는 내용입니다.
layer가 layer를 가지고 있을 때, 오직 최상위의 layer만 이벤트 헨들러(onMouseOver, onMouseOut)를
가질 수 있으므로, 내부의 layer는 다른 방법을 사용해야 합니다. 즉, 전체 페이지가 다 출력된 후 최상위의
layer의 onMouseOver를 사용하는 방법입니다. IE4는 div택에 많은 이벤트가 있지만, NN4에서는 position:absolute(relative)를
지정한 CSS-layer 또는 layer는 onmouseOver, onmouseOut 두가지 이벤트만 지원합니다. (ilayer, position:relative 는 이벤트를 사용할 수 없는 버그가 있습니다.)
onmove, onresize는 window의 이벤트이고 나머지는 모두 document의 이벤트입니다.
레이어(css-p), document, window에서의 사용가능한 이벤트
NN4는
* mousemove는 captureEvents()와만 같이 사용하는 이벤트, captureEvents()가 지정한 object의 이벤트이다.
IE4는 택 별로 너무 많은 이벤트를 지원해서 분류가 어렵습니다.. SDK를 참조하세요..
<script>
function sonLayerEvent() {
alert("I am sonLayer");
}
function setEvent() {
alert("I am parentLayer");
this.document.sonLayer.onmouseover = sonLayerEvent; //(1)
}
</script>
</head>
<body>
<div id=parentLayer style="position:absolute;">parentLayer
<div id=sonLayer style="position:absolute;">sonLayer</div>
</div>
<script>document.parentLayer.onmouseover=setEvent</script>
</body>
내부 layer에 이벤트를 지정하지 않았습니다. 페이지가 출력된 후 상위 layer인 parentLayer에 마우스를
가져가면 그 순간, sonLayer의 onmouseover 이벤트 헨들러에 sonLayerEvent() 함수를 지정하고
동시에 함수를 호출합니다. 즉, 먼저 "I am parentLayer"가 나오고 sonLayer에 이벤트를
지정합니다. 마우스를 조금씩 움직여서 sonLayer에 가져가면 "I am sonLayer"가 나옵니다.
주석 (1)의 this는 parentLayer를 말합니다. JavaScript로 Object에 이벤트 헨들러를 지정하면 HTML 택 내부에서 선언한 것과 같습니다. 즉, this는 그 Object 자신을 말합니다.
위의 소스는 parentLayer의 mouseover이벤트로 하위의 sonLayer에게 mouseover 이벤트를 지정했습니다. 따라서, 항상 "I am parentLayer"가 나오고 다음에 "I am sonLayer"가 나옵니다.
아래의 소스는 body의 onLoad 이벤트 헨들러로 각각 layer의 이벤트를 지정하는 것입니다.
<script>
function parentLayerEvent() {
alert("I am parent Layer");
}
function sonLayerEvent() {
alert("I am son Layer");
}
function setEvent() {
var DIV = document.parentLayer;
DIV.onmouseover = parentLayerEvent;
DIV.document.sonLayer.onmouseover = sonLayerEvent;
}
</script>
</head>
<body onLoad="setEvent()">
<div id=parentLayer style="position:absolute;">parentLayer
<div id=sonLayer style="position:absolute;">sonLayer</div>
</div>
</body>
여기서는 레이어에게 직접 이벤트를 지정하지 않고 페이지 출력후 body의 onLoad 이벤트헨들러로
레이어의 이벤트를 지정했습니다. 페이지내의 여러 layer에게 이벤트를 지정 시, setEvent 함수를 이렇게 할 수도 있습니다.
function allLayerEvent() { alert("EVENT"); }
function setEvent() {
var DIV = document.layers;
for (var i=0; i < DIV.length; i++) {
DIV[i].onmouseover = allLayerEvent;
}
}
</head>
<body onLoad="setEvent()">
NN4에서 position:absolute(relative); CSS Attribute를 지정한 택은 모두 layer입니다.
var DIV = document.all.tags("div")
IE4에서는 이 줄로 하면 됩니다. all은 페이지에 있는 모든 택을 포함하는 collection입니다. html, body,
script, head, p등 모든 택을 포함합니다. 이제 DIV 변수는 페이지에 있는 모든 div 택을 포함합니다. DIV[0].id는 페이지의
첫 번째의 div 택의 id입니다.
위의 코드로 페이지에 있는 div 택 모두에게 mouseover 이벤트헨들러에 지정함수로 allLayerEvent()를 지정합니다. div 택 모두에게 마우스를 가져가면 "EVENT"를 alert창이 보여줍니다.
n4 = (document.layers) ? true : false;
function allLayerEvent() { alert("EVENT"); }
function setEvent() {
if (n4) var DIV = document.layers
else var DIV = document.all.tags("div")
for (var i=0; i < DIV.length; i++) {
if (DIV[i].id.indexOf("MOVE") != -1)
DIV[i].onmouseover = allLayerEvent;
}
}
</head>
<body onLoad="setEvent()">
로 하면 페이지의 모든 div 택 layer의 이름 중에서 "MOVE"라는 단어가 들어가 있는 layer에게
allLayerEvent() 를 지정합니다. layer의 이름으로 지정여부를 결정할 수 있습니다. 여러 layer에서 특정
layer들에게 이벤트 헨들러를 지정할 수 있습니다.