onmouseenter, onmouseleave, onmouseover, onmouseout 이벤트 예제


onmouseenter, onmouseleave 정보 표시창
onmouseover, onmouseout 정보 표시창

onmouseenter, onmouseleaveonmouseover, onmouseout 이벤트들의 차이점을 비교해 보라.

이벤트 발생을 모체 용기 개체 DIV에서 하였다.
onmouseenter, onmouseleave 이벤트는 모체에서만 발생된다(버블링이 없다).

onmouseover, onmouseout 이벤트는 해당 개체에서 발생된다(버블링이 있다).

<STYLE>
.divClass{border:solid 2 red;padding:20;background:dfd;padding-right:0;padding-top:0}
.spanClass{border:solid 1 pink;background:yellow;}
.showClass{border:solid 1 blue;background:dfd;padding:5;height:1.2em;width:700}
</STYLE>
<SCRIPT>
function enterLeave(){
  showEnter.innerHTML='event.srcElement.nodeName='+event.srcElement.tagName;
  showEnter.innerHTML+=' event.srcElement.id='+event.srcElement.id+' event.type='+event.type;
}
function overOut(){
  showOver.innerHTML='event.srcElement.nodeName='+event.srcElement.nodeName;
  showOver.innerHTML+=' event.srcElement.id='+event.srcElement.id+' event.type='+event.type;
}
</SCRIPT>
<DIV id=divObj class=divClass
  onmouseenter="enterLeave()" onmouseleave="enterLeave()"
  onmouseover="overOut()" onmouseout="overOut()">
<BUTTON id=butObj>여기에 <SPAN id=spanObj class=spanClass>마우스</SPAN>를 올려보라.</BUTTON>
<HR id=hrObj size=10 width=200 color=green>
</DIV>
<DIV id=showEnter class=showClass>onmouseenter, onmouseleave 정보 표시창</DIV>
<DIV id=showOver class=showClass>onmouseover, onmouseout 정보 표시창</DIV>