事件含义及触发时机
focus、blur
获取焦点 (focus)、失去焦点(blur)。
属于 FocusEvent
接口。
keydown、keypress、keyup
- keydown 键盘按下,一直按就一直触发
- keypress 按下 产生字符值的键时会触发。如 字母、数字、标点符号。不产生字符值的键的例子是修饰键如 Alt、Shift、Ctrl、backspace 等
- 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
这种无焦点的就无法监听。