jQuery 事件
什麼是事件？
頁面對(duì)不同訪客的回應(yīng)叫做事件。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時(shí)所呼叫的方法。
實(shí)例：
在元素上移動(dòng)滑鼠。
選取單選按鈕
點(diǎn)擊元素
在事件中經(jīng)常使用術(shù)語"觸發(fā)"（或"激發(fā)"）例如： "當(dāng)您按下按鍵時(shí)觸發(fā)keypress事件"。
常見DOM 事件：
滑鼠事件? ? ? ?click ? ? ? ??dblclick ??mouseenter ??##moleave#111111 月#>?keyup ? ??? blur ??
表單事件? ? ? ?submit? ? ??change ? ??? ?? resize ? ???scroll ? ??
#jQuery 事件方法語法在jQuery 中，大多數(shù)DOM 事件都有一個(gè)等效的jQuery 方法。
頁面中指定一個(gè)點(diǎn)擊事件：$("p").click();
下一步是定義什麼時(shí)間觸發(fā)事件。您可以透過一個(gè)事件函數(shù)實(shí)作：$("p").click(function(){
? // 動(dòng)作觸發(fā)後執(zhí)行的程式碼!!});
常用的jQuery 事件方法$(document).ready()$(document).ready() 方法允許我們?cè)谖募耆d入完後執(zhí)行函數(shù)。該事件方法在?jQuery 語法?章節(jié)中已經(jīng)提到。
click()
在下面的實(shí)例中，當(dāng)點(diǎn)擊事件在某個(gè)<p> 元素上觸發(fā)時(shí)，隱藏當(dāng)前的<p> 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>dblclick()
#當(dāng)雙擊元素時(shí)，會(huì)發(fā)生dblclick 事件。
dblclick() 方法觸發(fā)dblclick 事件，或規(guī)定當(dāng)發(fā)生dblclick 事件時(shí)執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>雙擊鼠標(biāo)，我就消失。</p>
<p>雙擊我消失！</p>
<p>雙擊我也消失！</p>
</body>
</html>mouseenter()
當(dāng)滑鼠指標(biāo)穿過元素時(shí)，會(huì)發(fā)生mouseenter 事件。
mouseenter() 方法觸發(fā)mouseenter 事件，或規(guī)定發(fā)生mouseenter 事件時(shí)執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠標(biāo)移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠標(biāo)指針進(jìn)入此處，會(huì)看到彈窗。</p>
</body>
</html>?mouseleave()
當(dāng)滑鼠指標(biāo)離開元素時(shí)，會(huì)發(fā)生mouseleave 事件。
mouseleave() 方法觸發(fā)mouseleave 事件，或規(guī)定當(dāng)發(fā)生mouseleave 事件時(shí)執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再見，您的鼠標(biāo)離開了該段落。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</p>
</body>
</html>mousedown()
當(dāng)滑鼠指標(biāo)移到元素上方，並按下滑鼠按鍵時(shí)，會(huì)發(fā)生mousedown 事件。
mousedown() 方法觸發(fā)mousedown 事件，或規(guī)定當(dāng)發(fā)生mousedown 事件時(shí)執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠標(biāo)在該段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落</p>
</body>
</html>mouseup()
當(dāng)在元素上放開滑鼠按鈕時(shí)，會(huì)發(fā)生mouseup 事件。
mouseup() 方法觸發(fā)mouseup 事件，或規(guī)定發(fā)生mouseup 事件時(shí)執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠標(biāo)在段落上松開。");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</p>
</body>
</html>?hover()
#hover()方法用於模擬遊標(biāo)懸停事件。
當(dāng)滑鼠移到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(mouseenter);當(dāng)滑鼠移出這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(mouseleave)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").hover(function(){
alert("你進(jìn)入了 p1!");
},
function(){
alert("拜拜! 現(xiàn)在你離開了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">這是一個(gè)段落。</p>
</body>
</html>?focus()
當(dāng)元素獲得焦點(diǎn)時(shí)，發(fā)生 focus 事件。
當(dāng)透過滑鼠點(diǎn)擊選取元素或透過 tab 鍵定位到元素時(shí)，該元素就會(huì)獲得焦點(diǎn)。
focus() 方法觸發(fā)focus 事件，或規(guī)定當(dāng)發(fā)生focus 事件時(shí)運(yùn)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br><br>
Email: <input type="text" name="email">
</body>
</html>?blur()
#當(dāng)元素失去焦點(diǎn)時(shí)，發(fā)生blur 事件。
blur() 方法觸發(fā) blur 事件，或規(guī)定發(fā)生 blur 事件時(shí)執(zhí)行的函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>
