이벤트 지정과 작동결과 목록

택안에서 이벤트헨들러="함수" 로 했을 때의 결과

택안에서	NN4			IE4
	link	image	button	link	image	button
click	O	X	O	O	O	O
mouseOver	O	X	X	O	O	O
mouseOut	O	X	X	O	O	O
mouseDown	O	O	O	O	O	O
mouseUp	O	O	O	O	O	O
dblClick	O	X	O	O	O	O

JavaScript로 각각 지정했을 때의 결과

	NN4			IE4
	link	image	button	link	image	button
click	O	X	O	O	O	O
mouseOver	O	O	O	O	O	O
mouseOut	O	O	O	O	O	O
mouseDown	O	O	O	O	O	O
mouseUp	O	O	O	O	O	O
dblClick	O	O	O	O	O	O

document.이벤트헨들러=함수 로 했을 때의 결과

	NN4				IE4
	link	image	button	document	link	image	button	document
click	X	X	X	O	O	O	O	O
mouseOver	X	X	X	X	O	O	O	O
mouseOut	X	X	X	X	O	O	O	O
mouseDown	X	X	X	O	O	O	O	O
mouseUp	X	X	X	O	O	O	O	O
dblClick	X	X	X	O	O	O	O	O

document.captureEvents(이벤트); document.이벤트헨들러=함수; 로 했을 때의 결과

	NN4				IE4
	link	image	button	document	link	image	button	document
click	O	X	O	O	O	O	O	O
mouseOver	O	O	O	X	O	O	O	O
mouseOut	O	O	O	X	O	O	O	O
mouseDown	O	O	O	O	O	O	O	O
mouseUp	O	O	O	O	O	O	O	O
dblClick	O	O	O	O	O	O	O	O

택안에서 이벤트헨들러="함수" 로 했을 때의 결과

<a href="javascript:void(0)" onClick="alert('FIRE')">링 크</a>
<form name=fo><input type=button value="폼 단추" name=bu onClick="alert('FIRE')"></form>
<img src="ball.gif" name="img" onClick="alert('FIRE')"> 

<a href="javascript:void(0)">링 크</a>
<form name=fo><input type=button value="폼 단추" name=bu></form>
<img src="ball.gif" name="img"> 

<script>
function go() { alert("FIRE"); }

document.links[0].onmouseover=go
document.fo.bu.onmouseover=go
document.img.onmouseover=go
</script>

<a href="javascript:void(0)">링 크</a>
<form name=fo><input type=button value="폼 단추" name=bu></form>
<img src="ball.gif" name="img"> 

<script>
function go() { alert("FIRE"); }

document.onclick=go
</script>

<a href="javascript:void(0)">링 크</a>
<form name=fo><input type=button value="폼 단추" name=bu></form>
<img src="ball.gif" name="img"> 

<script>
function go() { alert("FIRE"); }

if(document.layers) //for nn4
	document.captureEvents(Event.CLICK)
document.onclick=go
</script>

nn4에서 이미지나 폼단추 같은 element는 mousedown이나 mouseover같은 이벤트를 지원하지 않습니다. 하지만, JavaScript로는 click, mouseover, mouseout, mousedown, mouseup, dblclick등을 지정할 수 있었습니다. 위의 2번재 table입니다. 단, 하나의 예외라면 이미지에 click 이벤트는 JavaScript로도 지정하지 못했습니다. 이것은 captureEvents()로도 마찬가지 입니다. 왜 이미지의 click는 안되는지는 아직까지 모르겠습니다. 버그인지 예외인지..


document는 페이지에 있는 모든 object를 가지고 있는 object입니다.

페이지에 있는 모든 layer, forms, links, anchors, applets, embeds, images element를 각 배열로 저장합니다. 그리고 title, URL, referrer, lastModified, cookie, domain, bgColor, fgColor, linkColor, vlinkColor, alinkColor, width, height 를 가지고 있습니다.

페이지에서 두번째 Layer는 document.layers[1] 로 참조할 수 있습니다. nn3, ie3.02 이하 JavaScript1.1 에서 document는 단순히 위의 기능만을 합니다. 페이지의 있는 모든 element를 배열로 그리고 property로 가지고 있습니다. ie4와 nn4에서도 이 기능은 여전히 상속받았습니다. 그리고, 버젼4에서는 block element라는 새로운 element가 생겼습니다. div나 span 택을 말합니다. 이들 택은 다른 element나 같은 종류인 block element를 가질 수 있고 DHTML에서 주로 사용되는 택입니다. 이들 택에 style과 event로 여러층의 div나 span으로 동적인 페이지를 만드는데 주역활을 합니다. 그런데, 이들 style와 event가 두 브라우저에서 많이 다릅니다. 여기서는 event에 관하여 예기하죠..

버젼4의 두 브라우저에서 층을 이루고 있는 레이어(css-p)에서의 EVENT가 서로 다른 방식으로 사용됩니다. ie4는 어떤 층을 이루고 있는 레이어 전체에게 이벤트를 지정시 링크의 mouseover처럼 단순히 추가된 하나의 object의 이벤트입니다. div, span에 추가된 이벤트를 div, span이 사용할 수 있습니다. 하지만, nn4는 이들 div나 span에게 추가된 이벤트가 없습니다. 이들 레이어가 사용할 수 있는 이벤트는 MOUSEOVER, MOUSEOUT 단 2개 뿐입니다. ie4의 레이어에서의 많은 이벤트 지원과 차이가 많이 납니다. 하지만, ie4가 레이어에서 지원하는 대부분의 이벤트를 nn4의 레이어에서도 사용할 수 있습니다.

창을 가리키는 window object는 자신의 document를 가지고 있습니다. form, image 같은 페이지에 있는것들 입니다. 이 document에는 레이어도 포함이 됩니다. 그리고 레이어도 자신의 document를 가질 수 있습니다. 레이어가 가지고 있는 것들입니다.
clip, document, window, id, name, left, x, top, y, pageX, pageY, hidden, layers, siblingAbove, siblingBelow, parentLayer, src, visibility, above, below, zIndex, bgColor

처럼 document와 layer도 가질 수 있습니다. 그리고 레이어의 document에 있는 많은 이벤트를 사용하여 ie4의 div나 span에 있는 많은 이벤트를 대신할 수 있습니다.