마우스를 박스 위로, 밖으로 이동 시켜 보라

마우스가 개체 위로 올가가 있는 동안 MouseOver() 기능함수를 호출하고, 밖으로 나가면 MouseOut() 기능함수를 호출한다.

<SCRIPT>
function MouseOver(obj){
  obj.style.backgroundColor='#ffff00';
}
function MouseOut(obj){
  obj.style.backgroundColor='#00ffff';
}
</SCRIPT>

<DIV onMouseOver="MouseOver(this)" onMouseOut="MouseOut(this)"
  style="width:400;border:solid 1 blue;padding:4px">마우스를 박스 위로, 밖으로 이동 시켜 보라</DIV>
여기서 마우스를 눌렀다 놓아 보라

마우스를 누르고 있는 동안 mouseDown() 기능함수를 호출하고, 놓으면 mouseUp() 기능함수를 호출한다.

<SCRIPT>
function mouseDown(obj){
  obj.style.backgroundColor='#ffff00';
}
function mouseUp(obj){
  obj.style.backgroundColor='#00ffff';
}
</SCRIPT>

<DIV onMouseDown="mouseDown(this)" onMouseUp="mouseUp(this)"
  style="width:300;border:solid 1 blue;padding:4px">여기서 마우스를 눌렀다 놓아 보라</DIV>
마우스를 눌렀다 놓아 보고 마우스를 이동시켜 보라

마우스가 눌리면 MusDown() 기능함수를 호출하고, 놓으면 MusOut() 기능함수를 호출하고, 마우스를 개체 위에서 이동시키면(onmousemove) MusMove() 기능함수를 호출한다.

두 예제에서 공히 마우스를 이동하지 않고 누르고 놓기만 하면 녹색배경이 나타나지 않고, 이동하는 경우(onmousemove)에만 녹색배경이 나타난다.

<SCRIPT>
function MusDown(obj){
  obj.style.backgroundColor='#ffff00';
}
function MusUp(obj){
  obj.style.backgroundColor='#00ffff';
}
function MusMove(obj){
  obj.style.backgroundColor='#00ff00';
}
</SCRIPT>

<DIV onMouseDown="MusDown(this)" onMouseUp="MusUp(this)" onMouseMove="MusMove(this)"
  style="width:400;border:solid 1 blue;padding:4px">마우스를 눌렀다 놓아 보고 마우스를 이동시켜 보라</DIV>
 

마우스가 개체 위를 누르고 있는 동안 동안 marqueeCall() 기능함수를 호출하고, 누른 것을 놓으면 marqueeStop() 기능함수를 호출한다.

<DIV id="imagearea"> </DIV>
<FORM name="formn">
<INPUT type="button" name="buttonn" value="마우스를 대고 눌러 보라"
  onMouseDown="marqueeCall()" onMouseUp="marqueeStop()">
</FORM>
<SCRIPT>
function marqueeCall(){ imagearea.innerHTML='<MARQUEE><IMG src="../../../gif/rfexample.gif"></MARQUEE>';}
function marqueeStop(){ imagearea.innerHTML='';}
</SCRIPT>
여기를 클릭해 보라
결과 결과 표시창
<SCRIPT>
var ss='';
function whatHappen(eventObj){
  ss+=eventObj+', ';
  showArea.innerHTML=ss;
}
</SCRIPT>

<DIV class=show style="color:blue;cursor:hand;border:solid 1 blue"
  onclick="whatHappen(event.type)"
  onmousedown="whatHappen(event.type)"
  onmouseup="whatHappen(event.type)"
  ondblclick="whatHappen(event.type)">여기를 클릭해 보라</DIV>

<TABLE width=100%><TR>
<TD width=5%>결과</TD>
<TD id="showArea" style="border:solid 1 teal;background:ffe;color:blue">결과 표시창</TD>
<TD width=1%><INPUT type="button" value="다시" onClick="ss='';showArea.innerHTML='결과 표시창'"></TD>
</TR></TABLE>