jQuery 事件
jQuery 是為事件處理特別設計的。
什麼是事件？
頁面對不同訪客的回應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所呼叫的方法。
實例：
- 在元素上移動滑鼠。
- 選取單選按鈕
- 點擊元素
在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。
常見DOM 事件：
| 滑鼠事件 | 鍵盤事件 | 表單事件 | ##文檔/視窗事件|
|---|---|---|---|
| keypress | #submit | load | |
| keydown | change | resize | |
| keyup | focus | scroll | |
| blur | unload |
jQuery 事件方法語法
在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法。
頁面中指定一個點擊事件：
$("p").click();
下一步是定義什麼時間觸發事件。您可以透過一個事件函數實作：
$("p").click(function(){
// 動作觸發後執行的程式碼!!
});
// 動作觸發後執行的程式碼!!
});
常用的jQuery 事件方法
#$(document).ready()
##$(document). ready() 方法允許我們在文件完全載入完後執行函數。該事件方法在jQuery 語法 章節中已經提到過。
click()
click() 方法是當按鈕點擊事件被觸發時會呼叫函數。 函數在使用者點擊 HTML 元素時執行。 在下面的實例中，當點擊事件在某個<p> 元素上觸發時，隱藏目前的<p> 元素：實例#
運行實例»點擊"運行實例" 按鈕查看線上實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</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>
<body>
<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>
</body>
</html>運行實例»點擊"運行實例" 按鈕查看線上實例
dblclick()
當雙擊元素時，會發生dblclick 事件。 dblclick() 方法觸發dblclick 事件，或規定發生dblclick 事件時執行的函數：實例
#運行實例»點擊"運行實例" 按鈕查看線上實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</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>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>
</body>
</html>#運行實例»點擊"運行實例" 按鈕查看線上實例
#mouseenter()
當滑鼠指標穿過元素時，會發生mouseenter 事件。 mouseenter() 方法觸發mouseenter 事件，或規定發生mouseenter 事件時執行的函數：實例
#執行實例»點擊"執行實例" 按鈕查看線上實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseenter(function(){
alert("您的鼠标移到了 id=p1 的元素上!");
});
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>
</html>#執行實例»點擊"執行實例" 按鈕查看線上實例
#mouseleave()
當滑鼠指標離開元素時，會發生mouseleave 事件。 mouseleave() 方法觸發mouseleave 事件，或規定當發生mouseleave 事件時執行的函數：實例##
運行實例»
點擊"運行實例" 按鈕查看線上實例
#執行實例»
#運行實例»
運行實例»
#運行實例»
#執行實例»
###<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseleave(function(){
alert("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
運行實例»點擊"運行實例" 按鈕查看線上實例
mousedown()
當滑鼠指標移到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。
mousedown() 方法觸發mousedown 事件，或規定發生mousedown 事件時執行的函數：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mousedown(function(){
alert("鼠标在该段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>#執行實例»
點擊"執行實例" 按鈕查看線上實例
#mouseup()
當在元素上放開滑鼠按鈕時，會發生mouseup 事件。
mouseup() 方法觸發mouseup 事件，或規定發生mouseup 事件時執行的函數：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#p1").mouseup(function(){
alert("鼠标在段落上松开。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>#運行實例»
點擊"運行實例" 按鈕查看線上實例
#hover()
hover()方法用於模擬遊標懸停事件。
當滑鼠移到元素上時，會觸發指定的第一個函數(mouseenter);當滑鼠移出這個元素時，會觸發指定的第二個函數(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("你进入了 p1!");
},
function(){
alert("拜拜! 现在你离开了 p1!");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>運行實例»
點擊"運行實例" 按鈕查看線上實例
focus()
當元素獲得焦點時，發生focus 事件。
當透過滑鼠點擊選取元素或透過 tab 鍵定位到元素時，該元素就會獲得焦點。
focus() 方法觸發focus 事件，或規定當發生focus 事件時執行的函數：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</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>#運行實例»
點擊"運行實例" 按鈕查看線上實例
#blur()
當元素失去焦點時，發生blur 事件。
blur() 方法觸發blur 事件，或規定發生blur 事件時執行的函數：
實例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</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>#執行實例»
點選"執行實例" 按鈕查看線上實例
