这里直接把《Javascript 高级程序设计（第三版）》中的解释贴出来：
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
- mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
- mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上时不会触发。
- mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上时不会触发。
由于mouseover和mouseout事件会冒泡，所以如果为一个元素添加了这两个事件，那么在该元素的后代元素上切换时会重复触发该元素的这两个事件（在项目中要注意）。如果在后代元素上阻止事件冒泡，那么鼠标指针移到后代元素上，相当于触发了该元素（祖先元素）的mouseout事件。
而mouseenter和mouseleave没有此行为。
注意：IE8及以下版本不支持DOM2级添加事件的方法。
例子：点我看在线演示（在控制台中查看）
<style type="text/css">
html,body{
height:100%;
}
body{
padding:100px;
}
div{
margin:auto;
}
#div1,#div4{
width:400px;
height:300px;
background-color: red;
}
#div4{
margin-top: 50px;
background-color: #2a3e5d;
}
#div2,#div5{
width:300px;
height:250px;
background-color: black;
}
#div3,#div6{
width:200px;
height:150px;
background-color: gold;
}
</style> <div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
div1
</div>
<div id="div4">
<div id="div5">
<div id="div6"></div>
</div>
div4
</div>
<script type="text/javascript" >
(function(){
function get(id){
return document.getElementById(id);
}
var div1 = get('div1'), div2 = get('div2'), div3 = get('div3');
div1.count = 0;
div1.addEventListener('mouseenter', function() {
this.style.backgroundColor = "pink";
div1.count++;
console.log('div1.count: '+div1.count);
}, false);
div1.addEventListener('mouseleave', function() {
this.style.backgroundColor = "green";
div1.count--;
console.log('div1.count: '+div1.count);
}, false); var div4 = get('div4'), div5 = get('div5'), div6 = get('div6');
div4.count = 0;
div4.addEventListener('mouseover', function() {
this.style.backgroundColor = "blue";
div4.count++;
console.log('div4.count: '+div4.count);
}, false);
div4.addEventListener('mouseout', function() {
this.style.backgroundColor = "gray";
div4.count--;
console.log('div4.count: '+div4.count);
}, false);
})();
</script>