事件類型

• 表單事件

  • 表單在送出時會發出submit事件，重置時會發出reset事件。
  • 按鈕類(<button>包含radio、checkbox)點擊時會有click事件。
  • change事件會在使用者與表單互動完畢，然後轉移焦點至其他元素或按下tab才會觸發。
  • 表單元素會在它們取得或失去鍵盤焦點時發出focus或blur事件。(focus/blur不會有bubble)

• window事件

  • load事件: 當文件和所有資源都已載入完成後，會觸發。(readystatechange與DOMContentLoaded是load事件的替代方法除了外部資源可能未載入完成，但document與元素都以載入完畢就會觸發)
  • unload事件: 當使用者導覽至其他document離開目前的document觸發。(unload可用來儲存使用者狀態但無法取消導覽，beforeunload類似unload，但它有機會向使用者詢問是否離開的確認)
  • onerror事件: JavaScript發生錯誤時會被觸發。
  • focus/blur: 也可用在window物件，當瀏覽器視窗取得或失去焦點時會觸發。
  • resize / scroll事件

• 滑鼠事件

  • 傳給滑鼠事件處理器具有一組特性，用來描述滑鼠位置與滑鼠按鍵的狀態。
  • clientX/clientY表示滑鼠在視窗的座標。
  • button/which表示按下了哪個滑鼠按鍵。
  • altKey/ctrlKey/metaKey/shiftKey搭配鍵盤按下鍵盤修飾鍵回傳true。
  • click事件下，在detail指出單擊或雙擊。
  • mousemove事件: 移動或拖拉滑鼠時會被觸發。
  • mousedown/mouseup事件: 滑鼠按下與放開時觸發。
  • 藉由mousemove和mousedown來偵測拖拉動作。
  • 當滑鼠移到元素上方，瀏覽器會在元素上發出mouseover事件，移開時會發出mouseout事件。(mouseover/mouseout會有bubble)
  • relatedTarget特性: 指出在轉移過程中所涉及的元素。
  • mousewheel事件: 在滾動滑鼠時觸發。

• key事件

  • 瀏覽器取得鍵盤事件。
  • 傳給鍵盤事件處理器的物件裡會有keyCode特性。
  • 鍵盤按下後事件發生順序: keydown->keypress->keyup。

• HTML5事件

  • 新增了<audio>和<vidio>元素有一系列的事件(paly/playing/waiting/ended/...)
  • drag and drop API定義了七個事件(dragstart/drag/dragend/drapenter/dragover/dragleave/drop)
  • 歷史瀏覽管理機制: hashchange和popstate事件。
  • Html表單定義了表單驗證機制，驗證失敗會發出invaild事件。

• 觸控與行動裝置事件

  • touchscreen事件類似滑鼠的click和scroll事件，
  • apple 產品會有gesture(手勢)、touch(觸碰)事件，旋轉時會有orientationchange事件