JQuery事件中mouseover与mouseenter以及mouseout与mouseleave的区别

区别：

1.当被选元素没有子元素时，mouseover与mouseenter的功能一样，当鼠标指针进入被选元素时，触发相应的处理函数。同理，mouseout和mouseleave，当鼠标指针移出被选元素时，触发相应的处理函数。

2.当被选元素包含子元素时，此时有很大的区别。不论鼠标指针移出或者移进被选元素还是子元素，mouseover事件都会触发，与之对应的是mouseout。而mouseenter事件，只有当鼠标指针移出或者移进被选元素时才会触发，与之对应的是mouseleave。

例如：

对于mouseover和mouseout，当鼠标指针进入被选元素内部时，触发mouseover方法的处理函数，接着当鼠标指针进入其子元素内部时，mouseover方法和mouseout方法都会触发，相对被选元素而言，此时处于离开状态（mouseout），相对子元素而言，此时处于进入状态（mouseover），当被移出子元素内部时，mouseover方法和mouseout方法都会触发，相对子元素而言，此时处于离开状态（mouseout），相对被选元素而言，此时处于进入状态（mouseover），移出被选元素内部，触发mouseout方法的处理函数。

对于mouseenter和mouseleave，当鼠标移进被选元素内部，mosueenter方法触发，接着移进子元素内部，无变化，就然后移出子元素内部，无变化，移出被选元素内部时，mouseleave方法触发。

举例源代码：

div1....

div2....

div3....

div4....