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(可任意命名)變數裡。接下來只要使用點符號語法就可以存取事件物件裡各種不同的屬性。
Previous
Next Post »