jquery的mouseover/mouseleave和mouseenter/mouseout区别,横向多级滑动菜单

在写多级滑动菜单时体验了一把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事件都可以传递给父元素。

以下为本人写的横向多级滑动菜单。只做效果，不过多渲染。

 
     
	
 
 


	

		
一级1			
			

				
二级11
			
		
		
一级2			
			

				
二级21
				
二级22
				
二级23
			
		
		
一级3			
			

				
二级31					
					

						
三级311
						
三级312							
							

								
四级3121
								
四级3122
							
							
						
三级313
					
				
				
二级32
				
二级33