onmouseenter, onmouseleave와 onmouseover, 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>