jquery 绑定事件 - mouseover() mouseo

事件函数列表

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()事件。