鼠標(biāo)事件恩敌，元素對鼠標(biāo)的諸如單擊、雙擊横媚、進(jìn)入纠炮、離開等事件做出反應(yīng)。
本文目錄：
- click()灯蝴；
- dblclick()恢口；
- hover()。
click(handler)
為所選元素添加單擊事件绽乔。
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| handler | Function | 必選弧蝇。事件觸發(fā)時執(zhí)行的函數(shù)。 |
dblclick(handler)
為所選元素添加雙擊事件折砸。
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| handler | Function | 必選看疗。事件觸發(fā)時執(zhí)行的函數(shù)。 |
下面的例子是點(diǎn)擊 <code>單擊</code> 按鈕時 div 背景色變?yōu)槌壬?點(diǎn)擊 <code>雙擊</code> 按鈕時 div 背景顏色變紅色睦授。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件02_點(diǎn)擊</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<div></div>
<button id="btn1">單擊</button>
<button id="btn2">雙擊</button>
<script>
$(function () {
// click()：單擊
$("#btn1").click(function () {
$(this).prev().css("backgroundColor","orange");
});
// dblclick()：雙擊
$("#btn2").dblclick(function () {
$("div:eq(0)").css("backgroundColor","red");
});
});
</script>
</body>
</html>
效果演示：
click()和dblclick().gif
hover(handlerIn, handlerOut)
為所選元素添加鼠標(biāo)懸停時和鼠標(biāo)離開時執(zhí)行的事件函數(shù)两芳。
| 參數(shù) | 類型 | 描述 |
|---|---|---|
| handlerIn | Function | 必選。鼠標(biāo)懸停于所選元素之上時執(zhí)行的事件函數(shù)去枷。 |
| handlerOut | Function | 必選怖辆。鼠標(biāo)離開所選元素時執(zhí)行的事件函數(shù)。 |
下面的例子是這樣的：div 的寬高都為 200px删顶，邊框?yàn)?1px solid lightgray竖螃，背景顏色為藍(lán)色；鼠標(biāo)懸停于 div 之上時逗余，div 背景顏色為橙色特咆，離開時恢復(fù)成藍(lán)色。
代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>事件04_hover()</title>
<script src="js/jquery-1.10.2.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid lightgray;
background-color: dodgerblue;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
$("div").hover(function () {
$(this).css("backgroundColor", "orange");
}, function () {
$(this).css("backgroundColor", "dodgerblue");
});
});
</script>
</body>
</html>
效果演示：
hover().gif
