javascript&JQuery: the missing manual 透過JQuery運用事件

<事件的分類>
滑鼠事件

click
dblclick
mousedown
mouseup
mouseover
mouseout
mouseover

網頁/視窗事件(Document/Window Events)

load 瀏覽器下載完所有的網頁檔案時
resize 按下「視窗最大化」、拖曳或調整瀏覽器視窗尺寸都會觸發
scroll 滑鼠滾輪、拖曳捲動軸
unload 點選某個連結去其他網頁、關閉瀏覽器頁籤、關閉瀏覽器視窗觸發

表單事件(Form Event)

submit 送出表單時觸發
reset 將表單還原成網頁剛載入的狀態
change 表單欄位在狀態改變例如被點選時觸發
focus 點選時瀏覽器聚焦到該欄位上
blur 和focus事件相反，在離開原先被選中的一個欄位時被觸發，常用於驗證表單資料

鍵盤事件(Keyboard Events)

@不同瀏覽器處理鍵盤事件不盡相同，要注意

keypress 壓下某按鍵尚未放開前就會觸發，只要一直按著不放就會一直被觸發
keydown 和keypress事件一樣，壓下按鍵時觸發，且會比keypress更早被觸發
(如果用FF、OP只會被觸發一次，IE、SA則會一直被觸發)
keyup 當放開按鍵時，就會觸發

主要有三個步驟

1.選取一或多個元件：觸發事件的元件

2.設定事件：加上句號、事件名稱和一組小括號。

3.將函式傳入事件中：函式裡定義好被觸發時要執行的指令。

在事件裡設定函式時，必須要省略彭常呼叫函式時都會加在函式名稱後面的（）。也就是說下面寫法是錯誤的：

$('#start').click(startSlideShow())

最常作法是傳一組匿名函式(anonymous function)

4.在匿名函式裡面設定要處理的事情。

<事件物件>
定義：瀏覽器每次觸發事件時，都會把和事件相關的資訊紀錄在一個事件物件(event object)裡，內含的資訊是在事件發生的當下取得的。

用法：會被當成引數傳進函式，只要在函式裡加上一組參數名稱就可以使用事件物件了。

ex.取得游標所在的X、Y座標。

$(function(){
  $(document).click(function(e) {
    var xPos = e.pageX;
    var yPos = e.pageY;
    alert('X:'+ xPos + 'Y:'+ yPos);
  });
});// end ready

當函式被呼叫時，事件物件就會被存進e（可任意命名）變數裡。接下來只要使用點符號語法就可以存取事件物件裡各種不同的屬性。

怡然自得

javascript&JQuery: the missing manual 透過JQuery運用事件