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