[面試官系列] input、change、keydown、keypress、keyup 觸發的時機是？

我認爲這道題是一個挺有意思的題，可是回答正確的面試者不多，今天我來聊一聊。先上 DJ，哦不對先上 DEMO，測試地址：https://www.lilnong.top/static/html/textarea-event-test.html

事件含義及觸發時機

focus、blur

獲取焦點 (focus)、失去焦點(blur)。

屬於 FocusEvent 接口。

keydown、keypress、keyup

1. keydown 鍵盤按下，一直按就一直觸發
2. keypress 按下 產生字符值的鍵時會觸發。如 字母、數字、標點符號。不產生字符值的鍵的例子是修飾鍵如 Alt、Shift、Ctrl、backspace 等
3. keyup 鍵盤擡起。

屬於 KeyboardEvent 接口

input、change

input

輸入時實時觸發（輸入的字符已經能夠被獲取到），發生在 keypress 以後。

屬於 InputEvent 接口

change

能夠理解爲 失去焦點前判斷，若是內容被改變就觸發事件。

屬於 Event 接口

迎接挑戰吧

如何阻止特定字符輸入好比回車

keypress、keydown 阻止默認事件便可 preventDefault()

如何判斷是輸入法

input 事件中有 isComposing 能夠用來區分是否是輸入法。

並且也能夠看到在 Vue 中，輸入法狀態也沒有獲取。

前端培訓-初級階段-場景實戰（2019-05-30）-input 搜索如何防抖，如何處理中文輸入

Vue 中 .lazy 修飾符的做用是什麼？

在默認狀況下，v-model 在每次 input 事件觸發後將輸入框的值與數據進行同步 (除了上述 輸入法組合文字時)。

lazy 修飾符會使同步在 change 事件_以後_進行：

<!-- 在「change」時而非「input」時更新 -->
<input v-model.lazy="msg">

Vue 中 v-model 和 v-model.lazy 使用上有什麼要注意的地方嗎？

如何讓 Vue.js 在 setInterval 實現倒計時的狀況下保證 input 正常輸入？

測試地址

那些事件會冒泡？

focus、blur 是不會冒泡的，冒泡須要使用 focusin、foucusout。

Vue 中 .native 是用來作什麼的？使用上有什麼注意的嗎？

用來監聽自定義組件的原生事件。

這裏須要注意：若是監聽的事件是不支持冒泡的，那麼有多是監聽不到的。

好比 focus，只有根節點是 <input>、<textarea> 這種能夠獲取焦點的元素的才能夠監聽到 demo傳送門，若是是 div、label、p 這種無焦點的就沒法監聽。

微信公衆號：前端linong

歡迎你們關注個人公衆號。有疑問也能夠加個人微信前端交流羣。