本節(jié)我們學(xué)習(xí) jQuery 中的事件的使用，jQuery 是專門為響應(yīng) HTML 頁面中的事件而設(shè)計(jì)的。我們?cè)谑褂脮r(shí)，需要遵循以下原則：
- 把所有
jQuery代碼置于事件處理函數(shù)中。 - 把所有事件處理函數(shù)置于文檔就緒事件處理器中。
- 把
jQuery代碼置于單獨(dú)的.js文件中。 - 如果存在名稱沖突，則重命名
jQuery庫。
什么是事件
首先我們要知道什么是事件，頁面對(duì)不同訪問者的響應(yīng)叫做事件，例如點(diǎn)擊某個(gè)按鈕，選擇單選框或復(fù)選框，滑動(dòng)鼠標(biāo)等，這些都可以稱為事件。
jQuery常用事件
在 jQuery 中，大多數(shù) DOM 事件都有一個(gè)相應(yīng)的 jQuery 方法。例如我們前面提到過的點(diǎn)擊事件的對(duì)應(yīng)的方法為 click() 方法。
click點(diǎn)擊事件
當(dāng)我們點(diǎn)擊元素時(shí)，會(huì)發(fā)生 click 點(diǎn)擊事件，這需要用到 click() 方法。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
alert("hello, xkd!");
});
});
</script>
</head>
<body>
<div>
<button>點(diǎn)擊按鈕</button>
</div>
</body>
</html>
在瀏覽器中的演示效果：
[圖片上傳失敗...(image-1262b3-1629816251788)]
dblclick雙擊事件
當(dāng)我們雙擊元素時(shí)，會(huì)觸發(fā) dblclick 雙擊事件。觸發(fā)雙擊事件需要用到 dblclick() 方法。
注意 dblclick 事件也會(huì)產(chǎn)生 click 事件，所有如果這兩個(gè)事件都被應(yīng)用于同一個(gè)元素，則會(huì)產(chǎn)生問題。
示例：
例如雙擊 p 元素并隱藏這個(gè)元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<div>
<p>雙擊隱藏此元素</p>
</div>
</body>
</html>
在瀏覽器的演示效果：
[圖片上傳失敗...(image-b8aa34-1629816251788)]
鼠標(biāo)事件
jQuery 的鼠標(biāo)有四個(gè)相關(guān)的事件，包括鼠標(biāo)指針進(jìn)入、離開、按下、釋放：
- 當(dāng)鼠標(biāo)指針穿過（進(jìn)入）被選元素時(shí)，可以通過
mouseenter()方法觸發(fā)mouseenter事件。 - 當(dāng)鼠標(biāo)指針離開 HTML 元素時(shí)，可以通過
mouseleave()方法觸發(fā)mouseleave事件。 - 當(dāng)鼠標(biāo)指針移動(dòng)到元素上方，并按下鼠標(biāo)按鍵時(shí)，可以通過
mousedown()方法觸發(fā)mousedown事件。 - 當(dāng)在元素上松開鼠標(biāo)按鈕時(shí)，可以通過
mouseup()方法觸發(fā)mouseup事件。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$(".one").mouseenter(function(){
alert("mouseenter事件");
});
$(".two").mouseleave(function(){
alert("mouseleave事件");
});
$(".three").mousedown(function(){
alert("mousedown事件");
});
$(".four").mouseup(function(){
alert("mouseup事件");
});
});
</script>
</head>
<body>
<div>
<p class="one">mouseenter事件，鼠標(biāo)指針移動(dòng)到元素上，彈出彈出層</p>
<p class="two">mouseleave事件，鼠標(biāo)指針離開元素上，彈出彈出層</p>
<p class="three">mousedown事件，在元素上按下鼠標(biāo)，彈出彈出層</p>
<p class="four">mouseup事件，在元素上松開鼠標(biāo)，彈出彈出層</p>
</div>
</body>
</html>
hover()方法
hover() 方法用于在鼠標(biāo)指針懸停在被選元素上時(shí)要運(yùn)行的兩個(gè)函數(shù)。即 mouseenter() 和 mouseleave() 方法。
示例：
hover() 中第一個(gè)函數(shù)在鼠標(biāo)進(jìn)入 HTML 元素時(shí)執(zhí)行，第二個(gè)函數(shù)在鼠標(biāo)離開 HTML 元素時(shí)執(zhí)行：
$(function(){
$("p").hover(
function(){
console.log("鼠標(biāo)進(jìn)入HTML元素，執(zhí)行第一個(gè)函數(shù)!");
},
function(){
console.log("鼠標(biāo)離開HTML元素，執(zhí)行第二個(gè)函數(shù)!");
}
);
});
上述代碼相當(dāng)于：
$("p").mouseenter(function(){
console.log("鼠標(biāo)進(jìn)入HTML元素，執(zhí)行第一個(gè)函數(shù)!");
}).mouseleave(function(){
console.log("鼠標(biāo)離開HTML元素，執(zhí)行第二個(gè)函數(shù)!");
});
我們可以在瀏覽器中看一下演示效果：
[圖片上傳失敗...(image-d20ecc-1629816251788)]
focus()和blur()方法
當(dāng)表單元素獲得焦點(diǎn)時(shí)，也可以說是通過鼠標(biāo)點(diǎn)擊選中元素或通過 tab 鍵定位到元素時(shí)，會(huì)發(fā)生 focus 事件?？梢酝ㄟ^ focus() 方法來觸發(fā) focus 事件。
focus() 方法通常與 blur() 方法一起使用，當(dāng)表單元素失去焦點(diǎn)時(shí)發(fā)生 blur 事件。 blur 事件是通過 blur() 來觸發(fā)的。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("input").focus(function(){
console.log("元素獲得焦點(diǎn)");
});
$("input").blur(function(){
console.log("元素失去焦點(diǎn)");
});
});
</script>
</head>
<body>
<div>
用戶名：<input type="text">
</div>
</body>
</html>
在瀏覽器中的演示效果：
