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

欢迎大家关注我的公众号。有疑问也可以加我的微信前端交流群。