jQuery 事件
jQuery 事件
什麼是事件？
頁面對不同訪客的回應叫做事件。
事件處理程序指的是當 HTML 中發生某些事件時所呼叫的方法。
實例：
在元素上移動滑鼠。選取單選按鈕點擊元素
在事件中經常使用術語"觸發"（或"激發"）例如： "當您按下按鍵時觸發 keypress 事件"。
事件清單。
1.blur() 當失去焦點時觸發。包括滑鼠點擊離開和TAB鍵離開。
2.change() 當元素取得焦點後，值改變失去焦點事觸發。
3.click() 當滑鼠點選時觸發。
4.dblclick() 當滑鼠雙擊時觸發。
5.error() 當javascript出錯或img的src屬性無效時觸發。
6.focus() 當元素取得焦點時觸發。注意：某些物件不支援。
7.focusin() 當元素或其子元素取得焦點時觸發，與focus()區別在於能夠偵測其內部子元素取得焦點的情況。
8.focusout() 當元素或其子元素失去焦點時觸發，與focusout()區別在於能夠偵測內部子元素失去焦點的情況。
9.keydown() 當鍵盤按下時觸發。
10.keyup() 當按鍵放開時觸發。
11.mousedown() 當滑鼠在元素上點擊後觸發。
12.mouseenter() 當滑鼠在元素上穿過時觸發。 mouseenter與mouseover的差別是，滑鼠從mouseover的子元素穿過時也會觸發而mouseenter不會。
13.mouseleave() 當滑鼠從元素上移出時觸發。
14.mousemove() 當滑鼠在元素上移動時觸發。 .clientX 和 .clientY分別代表滑鼠的X座標與Y座標。
15.mouseout() 當滑鼠從元素上移開時觸發。
16.mouseover() 當滑鼠移入元素時觸發。
17.mouseup() 當滑鼠左鍵按下釋放時觸發。
18.resize() 當瀏覽器視窗大小改變時觸發。 $(window).resize();
19.scroll() 當捲軸發生變化時觸發。
20.select() 當input裡的內容被選取時觸發。
21.submit() 提交選取的表單。
22.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">
<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">
<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()，mouseover()比較：
<html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
x=0;
y=0;
$(document).ready(function(){
$("div.over").mouseover(function(){
$(".over span").text(x+=1);
});
$("div.enter").mouseenter(function(){
$(".enter span").text(y+=1);
});
});
</script>
</head>
<body>
<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
</div>
<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
</div>
</body>
</html>mouseleave( )
當滑鼠指標離開元素時，會發生mouseleave 事件。
mouseleave() 方法觸發mouseleave 事件，或規定當發生mouseleave 事件時執行的函數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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("再见，您的鼠标离开了该段落。");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>
</html>mousedown()
當滑鼠指標移到元素上方，並按下滑鼠按鍵時，會發生mousedown 事件。
mousedown() 方法觸發mousedown 事件，或規定當發生mousedown 事件時執行的函數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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("鼠标在该段落上按下！");
});
});
</script>
</head>
<body>
<p id="p1">这是一个段落</p>
</body>
</html>mouseup()
當在元素上放開滑鼠按鈕時，會發生mouseup 事件。
mouseup() 方法觸發mouseup 事件，或規定當發生mouseup 事件時運行的函數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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("鼠标在段落上松开。");
});
});
</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中文网(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>blur()
當元素失去焦點時，發生blur 事件。
blur() 方法觸發 blur 事件，或規定發生 blur 事件時執行的函數：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>
