keyup与keydown（详解）

大家好，欢迎来到IT知识分享网。

1.Vue的键盘事件中的keyup与keydown

vue对原生js中的键盘事件进行了封装

• onkeyup => keyup
• onkeydown => keydown

我们可以借助他们对元素进行键盘事件的监听

<div id="#app"> <!-- keyup触发键盘事件 --> <input type="text" @keyup="fun"> <hr> <!-- keydown触发键盘事件 --> <input type="text" @keydown="fun"> </div> <script> Vue.config.productionTip = false //关闭开发提示 const vm = new Vue({ methods: { //事件回调 fun(event){ console.log('fun回调触发',event.target.value) } }, }) vm.$mount('#app') </script>

2.keyup与keydown事件的触发响应

①keyup触发场景：

        当用户按下键，再次抬起时，被触发

②keydown触发场景：

        当用户按下键时，立刻被触发

 效果如图所示：

        当用户一直按着一个键不松开时，我们就会看到两种不同的结果

触发原理：

        js语言会根据不同的事件触发判断进行响应

keyup:

        监听用户键盘是否有键弹起，以此来判断是否进行响应

keydown：

        监听用户键盘是否有键被按下，以此来判断是否响应

keyup与keydown的特殊情况

当我们通过keyup与keydown绑定的键与浏览器中的快捷键重合、冲突时

使用keyup可能不会响应，因为浏览器对于快捷键的响应都是通过onkeydown的模式

（也就是按下马上就被触发）

而我们使用keyup进行绑定与响应，在键还没有弹起时，浏览器已经执行了其他指令，阻断了页面中原本的keyup事件响应

模拟场景：当我们想要给input文本框，绑定Tab键的响应事件时

<div id="app"> <h3>keyup触发Tab键盘事件</h3> <input type="text" :style="{height:'20px'}" @keyup.tab="fun" /> <hr> <h3>keydown触发Tab键盘事件</h3> <input type="text" :style="{height:'20px'}" @keydown.tab="fun" > </div> <script> Vue.config.productionTip = false const vm = new Vue({ methods: { fun(event){ console.log('fun回调触发',event.target.value) } }, }) vm.$mount('#app') </script>

当你在输入完内容后，通过keyup监听tab键盘事件，你会发现绑定的回调没有被调用，

而通过keyup监听tab键盘事件，则会正常执行

原因：

        当你按下tab键，会触发浏览器中的默认事件（切换选中下一个元素目标）

这时你在抬起tab键，那么原本的元素不会监听到，因为你当前已经选中了其他元素，那么监听到tab键抬起事件的对象也变了

        而使用keydown进行绑定tab键响应，便不会有问题，因为当你按下tab键的那一刻，浏览器默认事件被触发，但是当前元素也监听到了，他们会同步调用，异步执行