研究 KeyboardEvent 之筆記

2019-04-06 14:13:09

KeyboardEvent

MDN: KeyboardEvent objects 用來詳述使用者和網頁之間,經由鍵盤產生的互動。每個事件(event)都記錄著一次鍵盤動作。事件類型(keydown 、 keypress 和 keyup)用來表示鍵盤執行哪種動作。

http://keycode.info/從 React 原始碼看 keyPress 與 keyDown 事件 | TechBridge 技術共筆部落格

中文輸入法與KeyDown/KeyPress事件

透過以下程式執行後的結果可以看出一點端倪,或者直接拜讀上面的參考文章也可以很快地了解其中的差別,不過當然是要自己實際來一次才會有深刻的體悟。

過程。查找一下文件, keypress - Event reference | MDN該keypress事件已被棄用。您可能想要使用beforeinput或keydown替代。」、「charCode 不推薦使用,建議使用 char 」、「keyCode 不推薦使用,建議使用 key 」。

Warning: This attribute is deprecated; you should use char instead, if available.

好吧,或許我得知道,但是實務上又是怎麼一回事呢,相信之後會有解答的。

後來又爬了一下文,發現以上的資訊跟我實際操作的結果不太一樣,以上的推薦使用 char,所以我去查看 e.char ,發現是 undefined。又找到這篇 KeyboardEvent - Web APIs | MDN,很清楚明瞭的說明「KeyboardEvent.char - 警告: 在 DOM Level 3 Events ,該 propertie 已被移除。現在只有 IE9+ 支持它。」,所以才是 undefined 呀。

好吧,我總算解決了我心中的疑惑了。

https://keycode.info/Key and Character Codes vs. Event Types,在仔細看一次,參考一下人家這個 api 用了什麼屬性(Properties),一直鑽牛角尖想著到底是該用哪一個也不是辦法,但至少我可以知道應該怎麼用。

整理一下目前的已知。

  1. 鍵盤事件,鍵盤事件的生命週期,從按下到放開會有三個事件。

    • keydown -> keypress -> keyup

keydown 與 keypress 事件,在你按著鍵盤會一直依序連續觸發(keydown -> keypress -> keydown -> ...),直到你放開鍵盤的瞬間 keyup 觸發一次。

  • keydown: 當你按下任何按鍵時會觸發 keydown 事件。keydown 事件我理解成「你按了什麼按鍵」才是重點,所以可以透過 keyCode 判斷你按了什麼按鍵。

  • keyPress: keyPress 事件除了 Enter, Space 以外,當你按下的按鍵可以產生字元時才會被觸發,所以我把 keyPress 事件想成是與輸入有關係的行為。keypress 除了可以輸出字元的按鍵以及 enter、space ,除此之外的按鍵不會被觸發。

  • keyup: 跟 keydown 一樣,不過就是放開的瞬間才會觸發一次。

  1. 觸發的地點: 發現 window 跟 input 觸發後的模式不一樣。

嘗試了一下,在試圖釐清 keydown、keypress 之間細微的差異,在 DevTool 的 console 查看時,發現 window 與 input 監聽 keyboard 事件觸發後的行為不太一樣。

window: image

input: image

  • 在監聽掛載在 window 的鍵盤事件時,不管你是英文或中文輸入法都會觸發。
  • 監聽 input 或者是監聽 window 但在 input 上面輸入時,輸入英文行為三者會被觸發、輸入中文行為時 keypress 不會被觸發。

e.chatCode: 在監聽 keypress 事件時才會有值,根據你輸入英文或中文當下按鍵輸出的實際字元的 charCode。 e.which: keydown 與 keyup 會輸出的值不同。

待補