컴퓨터잡담

JavaScript1.2 Event mouse css 제어

by 디케 posted Jul 03, 2010
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄


JavaScript1.2 Event mouse css 제어



http://user.chollian.net/~spacekan/dhtml/event/js12Event.htm



이벤트의 종류는 브라우저 자체의 이벤트, load, error 같은 이벤트나 사용자가 mouse, key로 동작했을 때, 일어나는 이벤트로 구분할 수 있습니다. 마우스를 누르면 mousedown, mouseup, click이 일어납니다. JavaScript1.2를 지원하는 NN4, IE4에서 이들 이벤트가 많이 늘었습니다. 이들 이벤트와 CSS-P로 동적인 웹페이지를 만들 수 있고, 웹어플리케이션도 만들 수 있습니다. 게임은 기본이죠..

<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에서의 이벤트

NN4에서 Position element의 이벤트는 택에 style="position:absolute"가 지정되어 있거나 NN4에서만 되는 layer택입니다. 두 개는 같은 property와 이벤트를 사용하지만, 이벤트를 정의하는 방법이 조금 틀립니다. 그리고, position:relative나 <ilayer>는 어떤 이벤트도 사용할 수 없습니다. 단순히 다른 block element를 포함할 수 있습니다. NN4 BUG입니다. IE4에서는 position:relative를 지정한 element도 이벤트를 사용할 수 있습니다.

이 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 이런 계층이 됩니다. 


onMouseOver, onMouseOut

NN4에서 <LAYER>나 Position element에서 직접 사용할 수 있는 event 입니다. layer 택에서는 IE4의 선언 방식과 같이 직접 택 안에서 선언할 수 있습니다.

style="position:..."로 선언된 Position element는 그 택 아래에서 즉, 택이 먼저 출력되고 난 다음 <script>택으로 <script>택 안에서 이벤트 헨들러를 선언해 줘야하고, 선언시 onmouseover = someFunction; 같이 함수에 괄호가 없어야 합니다. 괄호를 넣어주면 바로 제어가 함수로 넘어가고 실행을 합니다. 그리고, IE4에서는 onmouseover를 반드시 소문자로 써야합니다.

JavaScript로 읽을때 id나 name로 읽을 수 있습니다.

(NN4 )

<layer name=name onMouseOver="someFunction()">Layer</layer> 또는 

<div id=name style="position:...">CSS Layer</div> <script>document.name.onmouseover = someFunction;</script>

(IE4)
<div id=name style="position:..." onMouseOver="someFunction()">Layer</div> 또는 

<div id=name style="position:...">CSS Layer</div> <script>document.all.name.onmouseover = someFunction;</script>

IE4에서는 style을 정의한 택은 JavaScript로 사용할 때는 document.all이 택이름 앞에 있어야 합니다. all은 페이지의 모든 element를 배열로 가지고 있는 ie4만의 callection 이라는 Object입니다. html, body, img, a 등 페이지에 있는 모든 택을 배열로 저장합니다.

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택이 지원합니다. 


onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp

NN4에서 이들 이벤트는 Position element 의 event가 아니고 document Object의 event 입니다. 따라서 직접 사용을 할 수 없고, position element.document.onmousedown 식으로 document 라는 계층을 지정해야 합니다. 즉, 레이어의 document에 이들 이벤트를 지정합니다.

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 인 것과 다릅니다. 


onMouseMove

onMouseMove는 마우스 커서가 움직일 때 일어납니다. 주로 어떤 position element를 마우스로 위치를 옮길때 사용합니다. 이것은 연속적인 event가 일어나는 것입니다. MouseMove는 Capture Event Method(captureEvents)와 함께 사용됩니다. 따라서, onmousemove 혼자서는 사용할 수 없습니다. 반면에, 여기서도 IE4는 모든 event가 각각의 element(택) Object에 지정됩니다. 위의 event들과 같습니다.  

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에 함수를 지정합니다. 


onLoad

<LAYER> 택에서만 사용 가능하고 document.layerName.document.onload=someFunction은 사용할 수 없습니다.

이것은 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 이벤트가 없다. 


onMove, onResize

NN4에서 이들 이벤트는 window의 이벤트이고 IE4에선 onMove가 없습니다. move 이벤트는 사용자나 JavaScript가 창을 이동하면 일어납니다. resize는 창의 크기를 변경하면 일어납니다. 창의 크기를 변경하면 먼저 onMove가 일어나고 onResize가 둘 다 일어납니다.


레이어(css-p), document, window에서의 사용가능한 이벤트

NN4는

  • 레이어 : mouseover, mouseout
  • window : move, resize
  • document : 위의 4개의 이벤트와 mousemove 총 5개를 제외한 모든 이벤트.

    * mousemove는 captureEvents()와만 같이 사용하는 이벤트, captureEvents()가 지정한 object의 이벤트이다.

    IE4는 택 별로 너무 많은 이벤트를 지원해서 분류가 어렵습니다.. SDK를 참조하세요.. 

      NN 4 Event   
    onAbortonKeyDownonMouseUp 
    onBluronKeyPressonMove
    onClickonKeyUponReset
    onChangeonLoadonResize
    onDblClickonMouseDownonSelect
    onDragDrop onMouseMoveonSubmit
    onErroronMouseOutonUnload
    onFocusonMouseOver 
    바탕색 안내
    JavaScript1.1(nn3, ie3.02)
    에서 지원
    JavaScript1.1에서 지원하고 
    1.2에서 기능이 몇가지 추가됨
    JavaScript1.2에서 지원
    NN4에서 <LAYER>나 style="position:..."가 정의된 택은 Position element인데,
    이 두개에서 직접 사용할 수 있는 event는 onMouseOver, onMouseOut 두 개입니다.

    택별로 지원하는 Event는 NS사의 JavaScript1.2 설명서를 보세요.


      IE 4 Event   
    onabortonafterupdateonbeforeunloadonbeforeupdate
    onbluronbounceonchangeonclick
    ondataavailableondatasetchangedondatasetcompleteondblclick
    ondragstartonerroronerrorupdateonfilterchange
    onfinishonfocusonhelponkeydown
    onkeypressonkeyuponloadonmousedown
    onmousemoveonmouseoutonmouseoveronmouseup
    onreadystatechangeonresetonresizeonrowenter
    onrowexitonscrollonselectonselectstart
    onstartonsubmitonunload 
    IE4에서는 모든 택에서 위의 여러 event를 직접 사용할 수 있습니다. 택별로 사용 가능한 
    Event는 MS SDK를 보세요. DHTML 설명서에 있습니다.







  • Articles

    36 37 38 39 40