在寫多級滑動菜單時體驗了一把mouseenter/mouseleave和mouseover/mouseout區別.主要是mouse進入子元素時父元素的事件觸發的區別。
1.先說說mouseover/mouseout。
1.1當mouse進入父元素時觸發父元素mouseover事件;
1.2當mouse從父元素進入到子元素時，會先觸發父元素的mouseout事件=>觸發子元素的mouseover事件=>如子元素mouseover事件處理中不返回false則會把mouseover事件傳遞給父元素，則父元素也觸發了一次mouseover;
1.3當mouse從子元素A進入到另一個相臨的子元素B時，會解發A的mouseout事件=>A的mouseout事件可以傳遞給父元素=>觸發B的mouseover事件=>B的mouseover事件可以傳給元素。
1.4當mouse從子元素進入到父元素時，會觸發子元素mouseout事件=>子元素mouseout事件可以傳遞給父元素=>解發父元素的mouseover事件。
1.5當mouse從子元素移到外面，即也移到父元素外面，會觸發子元素mouseout事件=>子元素mouseout事件可以傳遞給父元素;
2.再說說mouseenter/mouseout。這兩個事件要jquery1.4以後版本才支持。
2.1當mouse進入父元素時觸發父元素mouseenter事件;
2.2當mouse從父元素進入到子元素時，只觸發子元素的mouseenter事件;
2.3當mouse從子元素A進入到另一個相臨的子元素B時，會解發A的mouseleave事件=>觸發B的mouseenter事件;
2.4當mouse從子元素進入到父元素時，會觸發子元素mouseleave事件=>解發父元素的mouseenter事件。
2.5當mouse從子元素移到外面，即也移到父元素外面，會觸發子元素mouseleave事件=>子元素mouseleave事件此時可以傳遞給父元素;
區別：從上面可以看出:兩組事件的第2、3，4種情況時有所不同。則在父元素內部的元素間移動時觸發的mouseover/mouseout事件可以傳遞給父元素，但mouseenter/mouseleave不可以傳遞給父元素。從父元素進入子元素時會先觸發父元素的mouseout事件，但不會觸發父元素的mouseleave事件。從子元素移動到外面時，子元素的mouseout和mouseleave事件都可以傳遞給父元素。以下爲本人寫的橫向多級滑動菜單。只做效果，不過多渲染。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多級菜單</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {margin:0; padding:0;}
li{list-style-type:none;}
#menu {margin-left:20px;}
#menu li {width:100px; height:30px;background-color:#CCC;}
#menu a{display:block; width:100px; height:30px; line-height:30px; text-align:center; color:#FFF;
background-color:#aaa; }
#menu>ul>li {float:left; margin:0 5px;}
#menu ul ul{display:none;}
#menu ul ul ul {height:0px; position:relative; left:100px; top:-30px;}
#menu ul ul li{border:1px solid #000;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">一級1</a>
<ul>
<li><a href="#">二級11</a></li>
</ul>
</li>
<li><a href="#">一級2</a>
<ul>
<li><a href="#">二級21</a></li>
<li><a href="#">二級22</a></li>
<li><a href="#">二級23</a></li>
</ul>
</li>
<li><a href="#">一級3</a>
<ul>
<li><a href="#">二級31</a>
<ul>
<li><a href="#">三級311</a></li>
<li><a href="#">三級312</a>
<ul>
<li><a href="#">四級3121</a></li>
<li><a href="#">四級3122</a></li>
</ul>
</li>
<li><a href="#">三級313</a></li>
</ul>
</li>
<li><a href="#">二級32</a></li>
<li><a href="#">二級33</a></li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;">
<p id='msg'></p>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#menu li").mouseenter(function(){
$(this).children('ul').slideDown(300);
var msg = "mouseenter"+$(this).children("a").text();
$("#msg").html($("#msg").html()+msg+"<br />");
});
$("#menu li").mouseleave(function(){
$(this).children('ul').stop(true,true).hide();
var msg = "mouseleave"+$(this).children("a").text();
$("#msg").html($("#msg").html()+msg+"<br />");
});
});
</script>
</body>
</html>