国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

從0開始構(gòu)建自己的前端知識(shí)體系-JS-事件-鍵盤事件總結(jié)

Anonymous1 / 2517人閱讀

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

前言

最近因一個(gè)需求在element-ui的Select組件文檔內(nèi)找不到對(duì)應(yīng)的示例，也就是filter-method方法的具體使用樣例，嘗試幾次之后也使用了一種辦法實(shí)現(xiàn)，但是感覺并不是最優(yōu)，于是嘗試看組件源碼來尋求結(jié)果。

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

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

鍵盤事件主要有以下四類

keydown

keypress

keyup

input (盡在input與textarea里觸發(fā))

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

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

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

功能性鍵位 Ctrl Command Shift等

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

輸入型鍵位

輕按一下快速彈起

keydown -> keypress -> input -> keyup

按住一段時(shí)間再彈起

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

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

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

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

功能性鍵位

這類鍵位不會(huì)觸發(fā)keypress，其實(shí)在測試功能性鍵位的時(shí)候，我認(rèn)為還可以具體分為2種鍵位

功能修飾性鍵位

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

單功能性鍵位

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

短按觸發(fā)順序

keydown -> keyup

長按觸發(fā)順序

keydown -> keydown...循環(huán) -> keyup

事件阻止

冒泡

這4類事件都會(huì)冒泡，阻止按照常規(guī)調(diào)用Api接口就可以阻止冒泡了。

默認(rèn)行為

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

input事件

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

chrome

沒有keypress事件的觸發(fā)

ff

僅觸發(fā)1次keydown，多次input和1次keyup

所以監(jiān)聽input事件就足夠了，參考百度搜索欄，我們可以實(shí)現(xiàn)一個(gè)搜索的提示性的功能，對(duì)中文還是很友好的。

何時(shí)獲取得到表單input的值

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

應(yīng)用

可以監(jiān)聽input對(duì)輸入內(nèi)容作實(shí)時(shí)校驗(yàn)

可以監(jiān)聽input對(duì)輸入內(nèi)容作友好的提示

可以監(jiān)聽keydown對(duì)組合快捷鍵作相應(yīng)，作一個(gè)出色的Web應(yīng)用

可以阻止一些輸入的內(nèi)容

后記

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

參考

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一下，會(huì)不斷更新github地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/93870.html

相關(guān)文章

  • 從輸入U(xiǎn)RL到頁面加載的過程？如何由一道題完善自己的前端知識(shí)體系！

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

    kel 評(píng)論0 收藏0

  • 前端開發(fā)知識(shí)點(diǎn)整理

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

    Blackjun 評(píng)論0 收藏0

  • 前端開發(fā)知識(shí)點(diǎn)整理

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

    Sike 評(píng)論0 收藏0

  • 前端開發(fā)知識(shí)點(diǎn)整理

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

    tracy 評(píng)論0 收藏0

  • 18年求職面經(jīng)及總結(jié)

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

    zhangwang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<