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