| JavaScript1.2 Event |
| Object의 이벤트의 지원과 사용 |
| 이벤트 종류별 설명 |
| 이벤트 순서와 지정하기 |
<A HREF="home.htm" onClick="goHome()">Go Home</A>링크 element 인 Go Home은 click 이벤트를 가지고 있습니다. click 이벤트 헨들러 onClick에게 함수 goHome()를 지정했습니다.
<A HREF="home.htm">Go Home</A> <script>document.links[0].onclick=goHome</script>위의 링크에게 이렇게 지정해도 같은 동작을 합니다. 여기서 onclick를 event handler 라고 합니다. 이벤트에 함수를 지정하는 것을 말합니다. 이벤트 헨들러는 element가 가지고 있는 이벤트가 자신에게서 일어났을 때, 이벤트의 고유작업을 하기 전에 지정한 함수(위의 goHome 같은)를 호출합니다. 이 함수에서 다른 element를 다루는 작업을 하거나 return 값으로 자신의 고유작업의 실행여부를 결정할 수 있습니다.
이 position element는 그 자신이 다른 element(택)를 가질 수 있습니다. 이 때는 포함된 element는 자신을 포함하고 있는 element의 경로를 전부 지정해야 제어할 수 있습니다. NN4에서 position element는 자신 속에 document Object를 가질 수 있는 하나의 창이라고 할 수 있습니다.
반면에, IE4는 이런 상황에도 그 element도 자신을 포함하고 있는 element와 같은 계층의 Object입니다. 둘은 똑 같이 document.all 이라는 같은 상위를 가집니다. 따라서, 자신을 포함하고 있는 상위의 element를 지정하지 않아도 외부에서 제어가 가능합니다.
IE4에서는 style="position:..."가 정의되어 있는 택만이 position element이고
layer는 지원하지 않습니다. IE4에서 모든 Position element는 하나의 계층에 있고 document.all 인
상위의 object에 속하는 각각의 Object입니다. 다른 택과 같습니다.
NN4의 Position element가 다른 element를 자신의 document로 가질 수 있는것과 다른 점입니다.
이점에서 NN4와 IE4의 Position element가 사용하는 이벤트의 사용법이 틀립니다.
IE4에서는 모든 이벤트 헨들러는 image같은 것에 사용할 때와 같습니다. <img src.. onMouseOver=..로 단순히 택에서 선언하면 되지만, NN4는 JavaScript1.1에서의 이벤트 헨들러는 이와 같지만, 1.2버젼에서 추가된 event handler, 즉 onMouseDown, onMouseUp, onKeyDown, 등등은 Position element(layer, style="position:...") 에서 그 Position element의 document의 Event입니다. 즉, 페이지 안의 조그만 페이지입니다.
document - layer - document - onMouseDown 이런 계층이 됩니다.
style="position:..."로 선언된 Position element는 그 택 아래에서 즉, 택이 먼저 출력되고 난 다음 <script>택으로 <script>택 안에서 이벤트 헨들러를 선언해 줘야하고, 선언시 onmouseover = someFunction; 같이 함수에 괄호가 없어야 합니다. 괄호를 넣어주면 바로 제어가 함수로 넘어가고 실행을 합니다. 그리고, IE4에서는 onmouseover를 반드시 소문자로 써야합니다.
JavaScript로 읽을때 id나 name로 읽을 수 있습니다.
(NN4 )
<layer name=name onMouseOver="someFunction()">Layer</layer> 또는(IE4)<div id=name style="position:...">CSS Layer</div> <script>document.name.onmouseover = someFunction;</script>
<div id=name style="position:..." onMouseOver="someFunction()">Layer</div> 또는IE4에서는 style을 정의한 택은 JavaScript로 사용할 때는 document.all이 택이름 앞에 있어야 합니다. all은 페이지의 모든 element를 배열로 가지고 있는 ie4만의 callection 이라는 Object입니다. html, body, img, a 등 페이지에 있는 모든 택을 배열로 저장합니다.<div id=name style="position:...">CSS Layer</div> <script>document.all.name.onmouseover = someFunction;</script>
IE4에서는 각 택 별로 많은 이벤트를 지원합니다. 거의 모든 택이 대부분의 이벤트를 지원 한다고 할수 있습니다. 너무 많아서 열거하기가 어렵습니다. MS JScript, DHTML SDK를 보세요..
<DIV> 택의 지원이벤트를 보면..
onafterupdate, onbeforeupdate, onblur, onclick, ondblclick, ondragstart, onfocus, onhelp,
onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover,
onmouseup, onresize, onrowenter, onrowexit, onscroll, onselectstart
위의 이벤트를 div택이 지원합니다.
<SPAN>은..
onblur, onclick, ondblclick, ondragstart, onfilterchange, onfocus, onhelp, onkeydown,
onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup,
onscroll, onselectstart
위의 이벤트를 span택이 지원합니다.
document - layerElement - document - eventHandler
레이어가 가지고 있는 모든 링크나 이미지 같은 document는 위에서 지정한 이벤트 헨들러를 가집니다.
(NN4 )
<layer name=name>Layer</layer> <script>document.name.document.onmousedown = someFunction;</script> 또는 <div id=name style="position:...">CSS Layer</div> <script>document.name.document.onmousedown = someFunction;</script>(IE4)
<div id=name style="position:..." onMouseDown="someFunction()">Layer</div> 또는 <div id=name style="position:...">CSS Layer</div> <script>document.all.name.onmousedown = someFunction;</script>NN4에서는 이들 event가 element안의 document 속에 포함 됩니다. 반면에, IE4는 각각의 event입니다. 위의 onMouseOver와 같습니다. 여기 someFunction안에서 this는 NN4에서는 element Object의 document입니다. 왜냐하면, 이들 이벤트는 layer가 직접 지원하는 이벤트가 아니기 때문입니다. layer가 직접 지원하는 이벤트는 위의 mouseover, mouseout 두 개 뿐 입니다. 그리고 resize, move는 window의 이벤트이고 나머지는 모두 document의 이벤트입니다.
layer는 document를 가질 수 있기 때문에 layer 속에 있는 것은 모두 layer의 document입니다. 링크, 폼 , 이벤트 그리고 layer 모두를 가질 수 있습니다. 또 다른 하나의 프레임(페이지)입니다.
즉, document.element.document입니다. 위의 onMouseOver가 layer자신 즉,
document.element 인 것과 다릅니다.
NN4에서..
<div id=name style="position:absolute; left:100; top:100; width:100; height:100; layer-background-color:red;">CSS Layer </div> <script> document.name.captureEvents(Event.MOUSEMOVE); document.name.onmousemove=someFunction; </script>이런 식으로 먼저 captureEvents()로 name이란 이름을 가진 position element에서 MOUSEMOVE를 한다고 선언하고 다음 onmousemove에 함수를 지정합니다.
이것은 layer의 visibility값에 상관하지 않고 layer가 출력될 때, 호출됩니다. IE4에 경우 window도 onLoad이벤트가 있습니다. body의 onLoad와 window의 onLoad를 같이 지정하면 body의 onLoad는 호출되지 않습니다.
<script>
function go() {}
function go2() {}
...
window.onload = go;
</script>
</head>
<body onLoad="go2()">
IE4에서 go2함수는 호출되지 않는다. NN4에서는 window에 Load 이벤트가 없다.
NN4는
* mousemove는 captureEvents()와만 같이 사용하는 이벤트, captureEvents()가 지정한 object의 이벤트이다.
IE4는 택 별로 너무 많은 이벤트를 지원해서 분류가 어렵습니다.. SDK를 참조하세요..
|
|
|||||||||||||||||||||||||||||||
|
NN4에서 <LAYER>나 style="position:..."가 정의된 택은 Position element인데, 이 두개에서 직접 사용할 수 있는 event는 onMouseOver, onMouseOut 두 개입니다. 택별로 지원하는 Event는 NS사의 JavaScript1.2 설명서를 보세요. | ||||||||||||||||||||||||||||||||
| IE 4 Event | |||
| onabort | onafterupdate | onbeforeunload | onbeforeupdate |
| onblur | onbounce | onchange | onclick |
| ondataavailable | ondatasetchanged | ondatasetcomplete | ondblclick |
| ondragstart | onerror | onerrorupdate | onfilterchange |
| onfinish | onfocus | onhelp | onkeydown |
| onkeypress | onkeyup | onload | onmousedown |
| onmousemove | onmouseout | onmouseover | onmouseup |
| onreadystatechange | onreset | onresize | onrowenter |
| onrowexit | onscroll | onselect | onselectstart |
| onstart | onsubmit | onunload | |
|
IE4에서는 모든 택에서 위의 여러 event를 직접 사용할 수 있습니다. 택별로 사용 가능한 Event는 MS SDK를 보세요. DHTML 설명서에 있습니다. | |||