事件處理

• 發生在瀏覽器網頁上的每個動作都是事件( event )，撰寫程式來回應事件才能產生互動。
• 指派函式來回應事件時，必須省略呼叫函式時加上的括號。

$('button').click(startbark()); // 錯誤
$('button').click(startbark); // 正確

• $('html') 會選取 html 元素物件，就是整個瀏覽器視窗。
• 瀏覽器引發事件時，會記錄事件資訊並儲存於事件物件( event object )，可將事件物件作為參數傳入處理函式( 常用 event、evt、e 等名稱表示 )。
• 可用事件物件預設的 preventDefault() 方法來阻止事件本身預設的回應動作。
  (亦可用在函式結束 return false 的方式)
• 阻止事件傳遞到父層標籤，則可用事件物件預設的 stopPropagation() 方法。
• 利用 on() 函式可更有彈性的處理事件回應。

$('button').on('click' , selector , argument , func );
// 四個參數依序是"事件名稱"、"選擇器"(可省略)、"傳入函式的引數"(可省略)、"處理函式"
// 設置"選擇器參數"可運用在尚未存在於網頁上的元素

• 滑鼠事件
  click：在點擊與放開滑鼠按鍵之後觸發。( 亦會產生 mousedown ＋ mouseup 事件 )
  dbclick：在快速雙擊滑鼠按鍵之後觸發。( 亦會產生兩次 click 事件，故在同一標籤上不要同時使用 )
  mousedown：在按下滑鼠鍵但還沒放開時觸發。( 可追蹤拖曳動作 )
  mouseup：放開滑鼠鍵時觸發。( 可追蹤拖曳動作 )
  mouseover：滑鼠移入網頁上某個元素時觸發。( 常與 CSS 的：hover 功能搭配使用)
  mouseout：滑鼠移出網頁上某個元素時觸發。
  mousemove：滑鼠移動時就會觸發。

  jQuery 的 hover 函式可結合處理 mouseover 、 mouseout 事件。
  範例：

  $('button').hover( func_1 , func_2 )
  // func_1 回應 mouseover 事件、func_2 回應 mouseout 事件

• document / window 事件
  load：在瀏覽器載入所有檔案後觸發。
  resize：在改變瀏覽器視窗大小時觸發。( 可在配合視窗大小改變網頁佈局時使用 )
  scroll：在拖動捲軸、用滑鼠中鍵滾輪捲動網頁或按下鍵盤上下鍵、上下頁鍵等類似按鍵時觸發。

• 表單事件
  submit：使用者送出表單時觸發。( 可用來在提送給伺服器前檢查欄位內容 )
  reset：將表單回復成網頁載入時狀態時觸發。
  change：表單欄位狀態改變時觸發。( 可用來立即檢查欄位內容 )
  focus：點擊文字欄位時觸發。
  blur：與 focus 相反，離開文字欄位時觸發。

• 鍵盤事件
  keydown：按下鍵盤時觸發。( 可偵測按鍵是否按下，可處理功能鍵、特殊鍵 )
  keyup：放開鍵盤時觸發。 ( 可偵測按鍵是否被放開，可處理功能鍵、特殊鍵 )
  keypress：按下鍵盤在還未放開前觸發。( 無法偵測按鍵被按下或放開，僅可處理輸入的字符鍵，存取其 which 屬性可取得按鍵碼 )
  按下按鍵後再放開的觸發順序：keydown --> keypress --> keyup