JS-Events

發表於 | 分類於 ， | 0 comments

那些你知道與不知道的事件們

前言

在 2018 iT 邦幫忙鐵人賽，看到Kuro大的重新認識 JavaScript 系列文，仔細的閱讀後，紀錄自己觀念不足的部份，也非常推薦給大家觀看此系列文。

Kuro-重新認識 JavaScript 系列

表單相關事件

  • input 事件： 當 input、 textarea 以及帶有 contenteditable 的元素內容被改變時，就會觸發 input 事件。

  • change 事件： 當 input、select、textarea、radio、checkbox 等表單元素被改變時觸發。 但與 input 事件不同的是，input 事件會在輸入框輸入內容的當下觸發，而 change 事件則是在目前焦點離開輸入框後才觸發。

  • submit 事件：當表單被送出時觸發，通常表單驗證都會在這一步處理，若驗證未通過則 return false;。

特殊事件

透過 Composition Events 我們可以觀察使用者在輸入框內開啟輸入法 (Input Method Editor, IME) 時，組字或選字的狀態。

這個時候就需要透過 Composition Events 來為輸入框做增強。

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

可以看到，如果要確認使用者輸入完成並送出文字時，就可以透過 compositionend來做最後確認。

執行的時候像這樣：

開啟console，在input輸入文字：event觸發時機

鍵盤相關事件

鍵盤相關事件有下列三種，在大多數情況下會將鍵盤事件註冊在 input 的輸入框上。

  • keydown 事件: 「壓下」鍵盤按鍵時會觸發 keydown 事件。

  • keypress 事件: 除了 Shift, Fn, CapsLock 這三種按鍵外按住時會觸發，若按著不放則會連續觸發。

  • keyup 事件: 「放開」鍵盤按鍵時觸發。

透過 e.keyCode 就可以判斷使用者目前按下的是哪個按鈕

1
2
3
4
5
6
textBox.addEventListener('keydown', function(e){
  // enter 的 keyCode 是 13
  if( e.keyCode === 13 ){
    formSubmit();
  }
}, false);

註： keyCode 的對應表可以到這裡查看：https://gist.github.com/tylerbuchea/8011573

滑鼠相關事件

  • mousedown / mouseup 事件: 這兩個事件分別會在滑鼠點擊了某元素「按下」(mousedown) 按鈕，以及「放開」(mouseup) 按鈕時觸發。

  • click 事件: 當滑鼠「點擊」了某元素時觸發。

  • dblclick事件: 當滑鼠「連點兩次」了某元素時觸發。

  • mouseenter / mousemove / mouseleave 事件：

  • 這三個事件要放在一起看

    • 當滑鼠游標移入了某元素時，會先觸發 mouseenter 事件。

    • 滑鼠游標在這個元素內「移動」時，會連續觸發 mousemove 事件。

    • 直到滑鼠游標離開了這個元素，才觸發 mouseleave 事件。

這些滑鼠相關的事件，都可以透過 event.pageX 與 event.pageY 屬性去取得目前在網頁對應的座標。

介面相關事件

  • load 事件：
    註冊在 window 物件上，指的是網頁資源 (包括CSS、JS、圖片等) 全數載入完畢後觸發。
    如果是 img 元素的 load 事件，則表示是此圖片載入完畢後觸發。

  • unload 、 beforeunload 事件：
    與 load 事件相反，unload 與 beforeunload 事件分別會在離開頁面或重新整理時觸發，而 beforeunload 會跳出對話框詢問使用者是否要離開目前頁面。

  • resize 事件：當瀏覽器 (window) 或指定元素 (element) 的「尺寸變更」時觸發。

  • scroll 事件：當瀏覽器 (window) 或指定元素 (element) 的「捲軸被拉動」時觸發。

  • DOMContentLoaded 事件：
    類似於 load 事件，但不同的是，load 事件是在網頁「所有」資源都已經載入完成後才會觸發，而 DOMContentLoaded 事件是在 DOM 結構被完整的讀取跟解析後就會被觸發，不須等待外部資源讀取完成。

簡單來說， DOMContentLoaded 與 load 的時機可以用這張圖來解釋：