区别在于：mouseover与mouseout再进入或离开后会执行这两个事件；
mouseenter与mouseleave在进入或离开后代元素不会执行这两个事件。
下面实例：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#oDiv1 {
height: 200px;
width: 200px;
background-color: #bfa;
}
.oDiv2 {
height: 100px;
width: 100px;
background-color: #baf;
margin: 0 auto;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="oDiv1">
<div class="oDiv2">
</div>
</div>
<script>
// mouseover与mouseenter区别
/*mouseover:在进入指点元素的时候，如果进入后代元素，也会触发
* mouseenter:鼠标移入子代中不会触发改时间
// mouseout与mouseleave区别
mouseout：进入子元素，会触发祖先元素执行该事件
mouseout：进入子元素，会触发祖先元素不会执行该事件
* */
oDiv1 = document.getElementById('oDiv1');
oDiv1.addEventListener('mouseover', function () {
console.log("mouseover"); //会执行三次
});
oDiv1.addEventListener('mouseenter', function () {
console.log("mouseenter"); // 会执行一次
});
oDiv1.addEventListener('mouseout', function () {
console.log("mouseout"); // 会执行三次
});
oDiv1.addEventListener('mouseleave', function () {
console.log("mouseleave"); //会执行一次
});
</script>
</body>
</html>
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)