jQuery 事件--鼠标事件

鼠标事件

事件

事件方法会触发匹配元素的事件

1鼠标事件

方法	说明
click([[data],fn])	触发每一个匹配元素的click事件。
dblclick([[data],fn])	当双击元素时，会发生 dblclick 事件。
toggle([speed],[easing],[fn])	用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
hover([over,]out)	一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
mouseup([[data],fn])	当在元素上放松鼠标按钮时，会发生 mouseup 事件。
mousedown([[data],fn])	当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseenter([[data],fn])	当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave([[data],fn])	当鼠标指针离开元素时，会发生 mouseleave 事件。
mousemove([[data],fn])	当鼠标指针在指定元素中移动时，就会发生 mousemove 事件。
mouseover([[data],fn])	当鼠标指针位于元素上方时，会发生 mouseover 事件。
mouseout([[data],fn])	当鼠标指针从元素上移开时，发生 mouseout 事件。

说明：

click([[data],fn])：这个函数会调用执行绑定到click事件的所有函数。
fn（Function）：在每一个匹配元素的click事件中绑定的处理函数。
[data],fn（String,Function）：

• data:click([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的click事件中绑定的处理函数。

---

dblclick([[data],fn])：
fn（Function）：在每一个匹配元素的dblclick事件中绑定的处理函数。
[data],fn（String,Function）：

• data:dblclick([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的dblclick事件中绑定的处理函数。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

---

语法.toggle( handler1, handler2 [, handlerN… ] )

jQuery 1.0 新增该函数，但从1.8开始被标记为已过时，并从1.9开始被移除。

参数

参数	描述
handler1	Function类型指定的事件处理函数1。
handler2	Function类型指定的事件处理函数2。
handlerN	可选/Function类型指定的事件处理函数N，可以有任意多个。

事件函数toggle()会为事件处理函数传入一个参数，即表示当前事件的Event对象。

如果事件处理函数的返回值为false，则表示阻止元素的默认事件行为，并停止事件在DOM树中冒泡。例如，<a>链接的click事件的处理函数返回false，可以阻止链接的默认URL跳转行为。

toggle()是一个特殊的事件函数，用于为匹配元素的click事件绑定多个事件处理函数。每次触发click事件时，toggle()函数会轮流执行其中的一个事件处理函数。

例如，我们使用toggle(“click”, A, B, C)为元素的click事件绑定了3个事件处理函数A、B、C。第一次点击执行A，第二次点击执行B，第三次点击执行C，第四次点击又执行A，第五次点击又执行B ……(如果调用了多次toggle()，它们之间是独立的)。

要删除通过toggle()绑定的事件，请使用unbind()函数。例如:unbind(“click”)。

这里介绍的toggle()是一个特殊的click事件函数，jQuery还有一个同名的toggle()函数，用于切换元素的显示/隐藏。

toggle()事件函数的具体用法：

function clickHandler1(){
    alert("click-1");
}

function clickHandler2(){
    alert("click-2");
}

function clickHandler3(){
    alert("click-3");
}

function clickHandler4(){
    alert("click-4");
}

$("#btn").toggle( clickHandler1, clickHandler2, clickHandler3, clickHandler4 );

//第1次点击执行clickHandler1
//第2次点击执行clickHandler2
//第3次点击执行clickHandler3
//第4次点击执行clickHandler4

//第5次点击执行clickHandler1
//第6次点击执行clickHandler2
//第7次点击执行clickHandler3
//第8次点击执行clickHandler4

//循环切换执行...

---

语法
1..hover( handlerIn , handlerOut )
分别指定鼠标移入、移出元素时的事件处理函数
2..hover( handlerInAndOut ）
用法一的变体。当鼠标移入、移出元素时的事件处理函数相同时，只需直接传入一个处理函数作为参数即可。

参数	描述
handlerIn	Function类型 鼠标移入元素时需要执行的处理函数。
handlerOut	Function类型 鼠标移出元素时需要执行的处理函数。
handlerInAndOut	Function类型 鼠标移入、移出元素时需要执行的处理函数。

hover()函数的所有参数都是函数，函数内的this指向当前DOM元素。hover()还会为其传入一个参数：表示当前事件的Event对象。

hover事件就是鼠标悬停事件。此外，你还可以额外传递给事件处理函数一些数据。

此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发hover事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过hover()绑定的事件，请使用unbind()函数。

---

mouseup([[data],fn])：
fn（Function）：在每一个匹配元素的mouseup事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mouseup([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mouseup事件中绑定的处理函数。

与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。

---

mousedown([[data],fn])：
fn（Function）：在每一个匹配元素的mousedown事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mousedown([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mousedown事件中绑定的处理函数。

mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。

---

mouseenter([[data],fn])：该事件大多数时候会与mouseleave 事件一起使用。
fn（Function）：在每一个匹配元素的mouseenter事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mouseenter([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。

与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

---

mouseleave([[data],fn])：该事件大多数时候会与mouseenter 事件一起使用。
fn（Function）：在每一个匹配元素的mouseleave事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mouseleave([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mouseleave事件中绑定的处理函数。

与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

---

mousemove([[data],fn])：
fn（Function）：在每一个匹配元素的mousemove事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mousemove([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mousemove事件中绑定的处理函数。

mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

---

mouseover([[data],fn])：该事件大多数时候会与 mouseout 事件一起使用。
fn（Function）：在每一个匹配元素的mouseover事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mouseover([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mouseover事件中绑定的处理函数。

注意：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

---

mouseout([[data],fn])：
fn（Function）：在每一个匹配元素的mouseout事件中绑定的处理函数。
[data],fn（String,Function）：

• data:mouseout([Data], fn) 可传入data供函数fn处理。
• fn:在每一个匹配元素的mouseout事件中绑定的处理函数。

注意：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。