jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

事件函数列表

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

mouseover() 鼠标进入（进入子元素也触发）

简单来说，可以看到括号写了进入子元素也触发，这是什么意思呢？

写一个简单的两个嵌套div来演示一下看看，如下：

进入子元素也会触发mouseover()事件，那么如果#small的div没有嵌套在里面是否会触发呢？
这样应该就不会。

这样就像是类似事件冒泡，不过是子元素将mouseover()传递冒泡给父元素，就算子元素没在#big里面，也会触发这个事件。

mouseout() 鼠标离开（离开子元素也触发）

上面看了mouseover() 是鼠标进入的事件，那么下面来看看这个事件离开的事件。

果然，这个子元素也是会触发mouseout()事件的。

mouseenter() 鼠标进入（进入子元素不触发）

上面两个事件都是具备事件冒泡的特性，看看这个有没有，如下：

测试发现，mouseenter()这个事件，移动到子元素#small div也是会被触发的。
那么如果重叠起来，子元素进入会不会触发呢？

当子元素在父元素内部的时候，mouseenter()就只会触发一次而已。也就是刚刚进入父元素#big div的时候触发，再进入#small div的时候就不会触发了。

mouseleave() 鼠标离开（离开子元素不触发）

相信这个mouseleave()也是一样的特性，跟mouseenter()差不多才对，下面来看看。

当两个元素嵌套在一起的时候，只有父元素触发了事件。
下面来看看不在一起的时候。

可以看到，#small div会将事件冒泡给#big div，导致触发mouseleave()事件。如果想要阻止呢？

可以写一个#small div执行return false;拦截事件冒泡，如下：

hover() 同时为mouseenter和mouseleave事件指定处理函数

这个hover()方法其实就是mouseenter()和mouseleave()的合并方法，如下：

当鼠标进入和移出的时候，都会触发hover()事件。