最近在写一个二级菜单，可能大家都非常熟练了，但是我还是想在这里做一些小的记录供人参考。
鼠标事件用的最多的就是移入移出，点击等等，今天主要说鼠标的这四个事件，onmousemove，mouseenter，onmouseover和onmouseleave，实例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
div{
100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
p{
background-color: white;
}
</style>
</head>
<body>
<h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseenter 事件中有在鼠标指针进入 div 元素时触发。 </p>
<p> onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)。</p>
<p> onmouseleave 事件中有在鼠标指针离开 div 元素时触发。</p>
<div onmousemove="myMoveFunction()">
<p>onmousemove: <br><span id="demo">鼠标移动到我这!</span></p>
</div>
<div onmouseenter="myEnterFunction()">
<p>onmouseenter: <br> <span id="demo2">标移动到我这!</span></p>
</div>
<div onmouseover="myOverFunction()">
<p>onmouseover: <br> <span id="demo3">标移动到我这!</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
<p>onmouseleave: <br> <span id="demo4">标移动到我这!</span></p>
</div>
<script>
var x = 0; y = 0; z = 0, w=0;
function myMoveFunction() { document.getElementById("demo").innerHTML = z+=1; }
function myEnterFunction() { document.getElementById("demo2").innerHTML = x+=1; }
function myOverFunction() { document.getElementById("demo3").innerHTML = y+=1; }
function myLeaveFunction() { document.getElementById("demo4").innerHTML = w+=1; }
</script>
</body>
</html>
其中：
1. onmousemove 事件在鼠标移动到 div 元素上时触发，鼠标在p元素内移动（即白框内也会触发，事件冒泡到父级div）；
2. onmouseenter 事件中有在鼠标指针进入 div 元素时触发，鼠标进入p元素内不会触发，因为不支持事件冒泡；
3. onmouseover 事件在鼠标指针进入 div 元素时触发,在子元素上也会触发(p 和 span)，因为事件冒泡到父级div;
4.onmouseleave 事件中在鼠标指针移除 div 元素时触发，鼠标移除p元素内不会触发，因为不支持事件冒泡。