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 = falseconst 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键的那一刻，浏览器默认事件被触发，但是当前元素也监听到了，他们会同步调用，异步执行

keyup与keydown（详解）相关推荐

KeyDown,KeyPress和KeyUp详解
KeyDown,KeyPress和KeyUp详解 Windows窗体通过引发键盘事件来处理键盘输入以响应Windows消息,大多数Windows窗体应用程序都通过处理键盘事件来以独占方式处理键盘输入. ...
js keyup、keypress和keydown事件详解
js keyup.keypress和keydown事件详解 js keyup.keypress和keydown事件都是有关于键盘的事件当一个按键被pressed 或released在每一个现代浏 ...
php keydown,JQuery中keyUp和keyDown的区别详解
这篇文章主要是对JQuery中keyUp与keyDown的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助定义和用法完整的 key press 过程分为两个部分:1. 按键被按 ...
WebDriver自动化测试框架详解
webDriver自动化测试框架详解一. 简介 WebDriver API相对于Selenium Remote Control API来说,虽然同样是控制浏览器,但它的编程接口更加简洁 WebDri ...
bootstrap表格遍历_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...
【jQuery笔记Part4】03-事件详解
事件详解 display:inline-block 事件冒泡阻止事件冒泡常用事件事件常用属性事件监听方法示例页面: on() 绑定事件绑定单个事件绑定多个事件->同一回调函数绑定 ...
JavaWeb = jQuery使用详解
jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作.事件.页面动画.异步操作等功能. 特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其 ...
Pygame详解（七）：key 模块
pygame.key 与键盘相关的 Pygame 模块. 函数 pygame.key.get_focused() - 当窗口获得键盘的输入焦点时返回 True pygame.key.get_pre ...
bootstrap 获取表格修改的结果_BootStrap实现带有增删改查功能的表格(DEMO详解)
前言 bootstrap的表格样式,有类似EasyUI的表格,也有卡片式表格,放到移动端显示,各有千秋.但是BootStrap自带的表格是没有操作列的,网上的资源不少,但是都是比较单一.零碎,JS.C ...

keyup与keydown（详解）