Carrie's Blog

Appearance

On this page

JS DOM Event ​

事件監聽 ​

事件的監聽器 ​

javascript
元素.addEventListener(事件名稱, 事件處理器, 捕獲/冒泡機制)
  • 事件名稱：click、...其他 Event Reference
  • 事件處理器：事件觸發時執行的 Function
  • 捕獲 / 冒泡機制：Boolean。true 為捕獲、false 為冒泡（預設）。

解除事件的註冊 ​

javascript
元素.removeEventListener（事件名稱, 事件處理器, 捕獲或冒泡機制）

事件處理器需要與綁定時的處理器指同一個實體。

Option ​

javascript
元素.addEventListener(事件名稱, 事件處理器, {
    once: true,
    passive: true,
    capture: true
})
  • once：事件只會觸發一次，結束後自動解除事件監聽。
  • passive：true 為事件處理器不會呼叫 event.preventDafault()（執行默認行為）。
  • capture：true 為捕獲、false 為冒泡（預設）。

網頁介面相關事件 ​

  • load：註冊在 window 上，網頁資源全部載入完畢後觸發。 若是 img 上的 load 則表示此圖片載入完畢後觸發。
  • unload：在網頁被卸載之後觸發。
  • beforeunload：在網頁被卸載之前觸發。
  • error：在 document 或圖片載入錯誤時觸發。
html
<img src='image.jpg' onerror="this.src='default.jpg'">
  • resize：當瀏覽器或指定元素的尺寸變更時觸發。
  • fullscreenchange：當使用者切換瀏覽器為全螢幕或還原視窗時觸發。
  • scroll：當瀏覽器或指定元素的卷軸被拉動時觸發。
  • DOMContentLoaded：當 DOM 結構被完整讀取跟解析後觸發（不須等待外部資源讀取完成）。

滑鼠相關事件 ​

  • mousedown：滑鼠點擊某元素按下時觸發。
  • mouseup：滑鼠點擊某元素放開時觸發。
  • click：滑鼠點擊某元素時觸發。
  • dblclick：滑鼠連點擊兩次某元素時觸發。
  • mouseenter：滑鼠進入某元素時觸發。
  • mouseover：滑鼠進入某元素時觸發（滑鼠經過不同元素時觸發）。
  • mousemove：滑鼠在某元素內移動時連續觸發。
  • mouseleave：滑鼠完全離開某元素時觸發。
  • mouseout：滑鼠離開某元素時觸發。

mouseenter vs mouseover ​

  1. mouseover 會將事件冒泡至上層的元素當中。
  2. mouseover 的觸發時機較早。

Codepen 練習

mouseleave vs mouseout ​

  1. mouseout 會將事件冒泡至上層的元素當中。
  2. mouseout 的觸發時機較早。

鍵盤相關事件 ​

  • keydown：壓下鍵盤按鍵時觸發。
  • keypress：按住時會觸發，按住不放則連續觸發（除了 Shift、Fn、CapsLock）。
  • keyup：放開鍵盤按鍵時觸發。
  • event.keyCode：在事件觸發時，可以得知使用者按下的按鍵。

    keyCode 對照表

觸發順序 ​

  1. keydown
  2. keypress
  3. keyup

Touch Event ​

  • touchstart：當觸控點被放置在觸控面上時觸發。
  • touchmove：當觸控點沿著觸控面移動時觸發。
  • touchend：當觸控點從觸控面上移除時觸發。
  • touchcancel：當觸控點因為實作方式的特定因素（e.g. 創建太多觸控點）而被中斷時觸發。

觸發順序 ​

  1. touchstart
  2. touchmove
  3. touchend
  4. click

表單相關事件 ​

  • input：當 input、textarea 或帶有 contenteditable 的元素內容被改變時馬上觸發。
  • select：當使用者在 input、textarea 元素選取文字時觸發。

    event.target.selectionStart：被選取文字範圍的起點。 event.target.selectionEnd：被選取文字範圍的終點。 event.target.value.substr(event.target.selectionStart, event.target.selectionEnd)：取出被選取的文字區段。

  • change：當 input、select、textarea、radio、checkbox 等表單元素被改變時觸發（目前焦點離開輸入框後）。
  • submit：當表單被送出後觸發（進行表單驗證）。
  • reset：當表單被重置時觸發。
  • focus：當表單元素被聚焦時觸發。
  • blur：當表單元素失去焦點時觸發。

特殊事件 ​

Composition Event 組成事件 ​

  • compositionstart：輸入框內開啟輸入法，且正在拼字時觸發。
  • compositionend：輸入框內開啟輸入法，且正在拼字或選字更改內容時觸發。
  • compositionupdate：輸入框內開啟輸入法，且正要送出時觸發。

    組成事件-範例

剪貼簿事件 ​

  • cut：當使用者在網頁上選取某段文字並進行剪下時觸發。
  • copy：當使用者在網頁上選取某段文字並進行複製時觸發。
  • paste：當使用者將剪貼簿上的文字貼上時觸發。

自訂義事件 ​

javascript
const event = new Event('事件名稱')

// 監聽事件
元素.addEventListener('事件名稱', 事件處理器, false)

// 觸發事件
元素.dispatchEvent(event)
  • event.preventDafault()：取消事件的預設行為。
  • event.stopPropagation()：阻止事件向上冒泡傳遞。