[面试官系列] 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

欢迎你们关注个人公众号。有疑问也能够加个人微信前端交流群。