jQuery 事件
在本教程中，你將學習如何使用 jQuery 處理事件。
什麼是時間 Event
事件通常由使用者與網頁的互動觸發，例如點選連結或按鈕，文字輸入到輸入框或文字區域，選擇框在選擇框中進行，按鍵在鍵盤上按下，滑鼠指標移動等。在某些情況下，瀏覽器本身可以觸發事件，例如頁面載入和解除安裝事件。
jQuery 的通過為大多數原生瀏覽器事件的事件的方法提高了基本的事件處理機制，其中的一些方法是 ready() ， click() ， keypress() ， focus() ， blur() ， change() 等。例如，執行一些 JavaScript 程式碼，當 DOM 準備就緒後，就可以使用 jQuery ready() 方法，像這樣：
<script type="text/javascript">
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>
注意： $(document).ready() 是一個用於使用 jQuery 安全地操作頁面的事件。此事件中包含的程式碼僅在頁面 DOM 準備就緒時才會執行，即文件準備好被操作時。
通常，事件可以分為四個主要組 - 滑鼠事件，鍵盤事件，表單事件和文件/視窗事件 。以下部分將逐一簡要介紹所有這些事件以及相關的 jQuery 方法。
滑鼠事件
當使用者單擊某個元素，移動滑鼠指標等時會觸發滑鼠事件。這裡有一些常用的 jQuery 方法來處理滑鼠事件。
click() 方法
jQuery click() 方法將事件處理函式附加到 click 事件的選定元素。當使用者單擊該元素時，將執行附加功能。以下示例將在單擊頁面時隱藏頁面上的 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>
**注意：**jQuery 事件處理函式中的 this 關鍵字是對當前正在傳遞事件的元素的引用。
dblclick() 方法
jQuery dblclick() 方法將事件處理函式附加到 dblclick 事件的選定元素。當使用者雙擊該元素時，將執行附加功能。以下示例將在雙擊時隱藏 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>
hover() 方法
jQuery hover() 方法將一個或兩個事件處理函式附加到滑鼠指標進入和離開元素時執行的所選元素。當使用者將滑鼠指標放在元素上時執行第一個函式，而當使用者從該元素移除滑鼠指標時執行第二個函式。
下面的示例將在你將游標放在其上時突出顯示 <p> 元素，刪除游標時將刪除突出顯示。
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>
提示： 你可以認為 hover() 方法是 jQuery mouseenter() 和 mouseleave() 方法的組合。
mouseenter() 方法
jQuery mouseenter() 方法將事件處理函式附加到滑鼠進入元素時執行的所選元素。以下示例將游標放在元素上時將類高亮顯示新增到 <p> 元素。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>
mouseleave() 方法
jQuery mouseleave() 方法將事件處理函式附加到滑鼠離開元素時執行的所選元素。以下示例將當游標從其上移除時，從 <p> 元素中刪除 highlight 類。
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>
有關更多滑鼠事件方法，請檢視 jQuery 事件參考»
鍵盤事件
當使用者按下或釋放鍵盤上的鍵時會觸發鍵盤事件。這裡有一些常用的 jQuery 方法來處理鍵盤事件。
keypress() 方法
jQuery keypress() 方法將事件處理函式附加到所選元素（通常是表單控制元件），該元素在瀏覽器從使用者接收鍵盤輸入時執行。以下示例將在 kypress 事件觸發時顯示訊息，以及按鍵盤上的鍵時觸發的次數。
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
注意： keypress 事件類似於 keydown 事件，除了修改器和非列印鍵（如 Shift，Esc，Backspace 或 Delete，箭頭鍵等）觸發 keydown 事件但不觸發 keypress 事件。
keydown() 方法
jQuery keydown() 方法將事件處理函式附加到使用者首次按下鍵盤上的鍵時執行的所選元素（通常是表單控制元件）。以下示例將在觸發 keydown 事件時顯示訊息，以及在按鍵盤上鍵時觸發的次數。
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
keyup() 方法
jQuery keyup() 方法將事件處理函式附加到使用者在鍵盤上釋放鍵時執行的所選元素（通常是表單控制元件）。以下示例將在觸發 keyup 事件時顯示訊息，以及在按下並釋放鍵盤上的鍵時觸發的次數。
<script type="text/javascript">
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>
提示： 鍵盤事件可以附加到任何元素，但事件僅傳送到具有焦點的元素。這就是鍵盤事件通常附加到表單控制元件（如文字輸入框或 textarea）的原因。
表格活動
當表單控制元件接收或失去焦點或使用者修改表單控制元件值時觸發表單事件，例如在文字輸入中鍵入文字，在選擇框中選擇任何選項等。這裡有一些常用的 jQuery 方法處理表單事件。
change() 方法
jQuery change() 方法將事件處理函式附加到，並在其值更改時執行元素。當你在下拉選擇框中選擇任何選項時，以下示例將顯示警告訊息。 <input> <textarea> <select>
<script type="text/javascript">
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>
注意： 對於選擇框，核取方塊和單選按鈕，當使用者使用滑鼠進行選擇時會立即觸發事件，但對於文字輸入和文字區域，在元素失去焦點後觸發事件。
focus() 方法
jQuery focus() 方法將事件處理函式附加到選定元素（通常是表單控制元件和連結），這些元素在獲得焦點時執行。以下示例將在文字輸入獲得焦點時顯示訊息。
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
blur() 方法
jQuery 的 blur() 方法附接的事件處理函式向表單元素如 <input> ， <textarea> ， <select> 即當它失去焦點執行。以下示例將在文字輸入失去焦點時顯示訊息。
<script type="text/javascript">
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>
submit() 方法
jQuery submit() 方法將事件處理函式附加到使用者嘗試提交表單時執行的 <form> 元素。以下示例將顯示一條訊息，具體取決於你嘗試提交表單時輸入的值。
<script type="text/javascript">
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>
提示： 可以通過單擊提交按鈕或在某些表單元素具有焦點時按 Enter 鍵來提交表單。
檔案/視窗事件
在頁面 DOM（文件物件模型）準備就緒或使用者調整大小或滾動瀏覽器視窗等情況下也會觸發事件。以下是一些常用的 jQuery 方法來處理此類事件。
ready() 方法
jQuery ready() 方法指定在 DOM 完全載入時要執行的函式。
一旦 DOM 層次結構完全構建並準備好進行操作，以下示例將替換段落文字。
<script type="text/javascript">
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>
resize() 方法
jQuery resize() 方法將事件處理函式附加到視窗元素，該元素在瀏覽器視窗大小發生變化時執行。
當你嘗試通過拖動其角來調整瀏覽器視窗的大小時，以下示例將顯示瀏覽器視窗的當前寬度和高度。
<script type="text/javascript">
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>
scroll() 方法
jQuery scroll() 方法將事件處理函式附加到視窗或可滾動的 iframe 和元素的滾動位置更改時執行的元素。
滾動瀏覽器視窗時，以下示例將顯示一條訊息。
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>