從0開始構建自己的前端知識體系-JS-事件-鍵盤事件總結

Anonymous1 發布于2019-08-22 15:55 / 2516人閱讀

摘要：在探尋的過程中發現自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫總結一下下文所說只在與里做了探究。短按觸發順序長按觸發順序循環事件阻止冒泡這類事件都會冒泡，阻止按照常規調用接口就可以阻止冒泡了。

前言

最近因一個需求在element-ui的Select組件文檔內找不到對應的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了一種辦法實現，但是感覺并不是最優，于是嘗試看組件源碼來尋求結果。

在探尋的過程中發現自己對鍵盤輸入事件的理解還并不到位，以至于有一些代碼看得云里霧里，趕緊查閱資料寫寫demo總結一下(下文所說只在chrome與ff里做了探究)。

瀏覽器的鍵盤事件(keyboard event)

鍵盤事件主要有以下四類

keydown

keypress

keyup

input (盡在input與textarea里觸發)

事件觸發順序
一開始我以為觸發順序看起來很easy 不就應該是keydown -> keypress -> input -> keyup這個順序，但實際情況里還有許多特殊情況。(如果不是在input與textarea里的則去掉input即可)

首先說一下，鍵盤上的鍵位可以分為2種類型

輸入型鍵位 0-9 a-z等等一切你要輸入字符的按鍵

功能性鍵位 Ctrl Command Shift等

這兩種類型在事件觸發順序上是有所差別的

輸入型鍵位

輕按一下快速彈起

keydown -> keypress -> input -> keyup

按住一段時間再彈起

在mac上測試的時候，搜狗輸入法以及自帶的拼音輸入法順序為 keydown -> (keypress -> input -> keydown -> keypress -> input ...循環) -> keyup，輸入框里輸入字符一直增加

然而切換到系統自帶的英文輸入法 keydown -> keypress -> input -> (keydown -> keydown -> ...循環) -> keyup，輸入框里輸入字符只有1個

注：僅在表單里不同輸入法可能表現不一致，如果window層面上的監聽則表現一直，都為(keydown -> kewpress...循環) -> keyup

具體原因不詳，希望有大佬可以指出，感覺是輸入法底層實現的問題。但是我們可以看出，在input元素里，只有觸發keydown事件是無法成功在其中輸入值的

功能性鍵位

這類鍵位不會觸發keypress，其實在測試功能性鍵位的時候，我認為還可以具體分為2種鍵位

功能修飾性鍵位

如Ctrl, Command等，需要組合其他鍵位才能有效果，這類鍵位的長按與短按觸發順序都一致，為keydown -> keyup，

單功能性鍵位

如Ese 上下左右箭頭這種不需要組合的生效的鍵位。

短按觸發順序

keydown -> keyup

長按觸發順序

keydown -> keydown...循環 -> keyup

事件阻止

冒泡

這4類事件都會冒泡，阻止按照常規調用Api接口就可以阻止冒泡了。

默認行為

鍵盤事件的默認行為就是輸入，那么已經了解過了事件觸發順序，我們一定可以猜到，如果想阻止在input輸入框里輸入字符，我們可以在input事件之前阻止默認行為，即在keydown和keypress事件的時候調用e.preventDefault()即可阻止輸入，這個技巧也常用于輸入驗證的時候阻止一些超過次數的輸入。而在keydown里阻止默認行為的話，連keypress事件都不會觸發

input事件

如果你在input,textarea輸入框里輸入中文的時候，在ff與chrome有不同的事件觸發流程

chrome

沒有keypress事件的觸發

僅觸發1次keydown，多次input和1次keyup

所以監聽input事件就足夠了，參考百度搜索欄，我們可以實現一個搜索的提示性的功能，對中文還是很友好的。

何時獲取得到表單input的值

通過上述知識，我們可以猜到只有在輸入框的值發生變化的時候才會觸發input事件，那么在input事件里必然可以精確的獲取到當前input的值，同理keyup更晚，一定可以獲取到。keydown,keypress事件觸發的時候，則無法獲取到input表單改變的最新值。

應用

可以監聽input對輸入內容作實時校驗

可以監聽input對輸入內容作友好的提示

可以監聽keydown對組合快捷鍵作相應，作一個出色的Web應用

可以阻止一些輸入的內容

后記

感覺把input事件放到這里面不太合適，畢竟其他三個時間都是鍵盤事件，而input是專屬于表單值變化而觸發的事件。但是感覺一般的坑都在這里，所以就加進來了。

參考

https://developer.mozilla.org/zh-CN/docs/Web/Events/keydown

https://developer.mozilla.org/zh-CN/docs/Web/Events/keyup

https://developer.mozilla.org/zh-CN/docs/Web/Events/keypress

https://developer.mozilla.org/zh-CN/docs/Web/Events/input

如果喜歡可以star一下，會不斷更新github地址

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93870.html

從輸入URL到頁面加載的過程？如何由一道題完善自己的前端知識體系！

摘要：前言見解有限，如有描述不當之處，請幫忙指出，如有錯誤，會及時修正。為什么要梳理這篇文章最近恰好被問到這方面的問題，嘗試整理后發現，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目。前言見解有限，如有描述不當之處，請幫忙指出，如有錯誤，會及時修正。為什么要梳理這篇文章？最近恰好被問到這方面的問題，嘗試整理后發現，這道題的覆蓋面可以非常廣，很適合作為一道承載知識體系的題目...

kel 2019-08-22 15:18 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

Sike 2019-08-29 12:44 評論0 收藏0
前端開發知識點整理

摘要：前言本文主要是有關前端方面知識按照目前的認知進行的收集歸類概括和整理，涵蓋前端理論與前端實踐兩方面。前言：本文主要是有關前端方面知識按照 XX 目前的認知進行的收集、歸類、概括和整理，涵蓋『前端理論』與『前端實踐』兩方面。本文會告訴你前端需要了解的知識大致有什么，看上去有很多，但具體你要學什么，還是要 follow your heart & follow your BOSS。初衷...

tracy 2019-08-01 16:59 評論0 收藏0
18年求職面經及總結

摘要：年求職面經及總結我的求職之路差不多走到盡頭了感覺真是精疲力盡了把這大半年的經歷和面試總結寫下來希望能給和我一樣在求職路上煎熬的人一點幫助先說背景微電子科學與工程專業學過兩門和相關的課程語言和單片機這個專業的唯一好處就是大部分人并不知道這個專 18年求職面經及總結我的求職之路差不多走到盡頭了,感覺真是精疲力盡了.把這大半年的經歷和面試總結寫下來,希望能給和我一樣在求職路上煎熬的人一點幫...

zhangwang 2019-08-22 11:07 評論0 收藏0