键盘事件、事件修饰符

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了键盘事件、事件修饰符相关的知识，希望对你有一定的参考价值。

参考技术A 1、vue中常用的按键别名

            回车 enter 

            删除 delete（捕获“删除”和“退格”键）

            退出 esc

            空格 space

            换行 tab  如果要用tab键绑定事件就不能用keyup 要用keydown 

            上 up

            下 down

            左 left

            右 right

        2、vue没有提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

        3、系统修饰键（用法特殊）：ctrl、alt、shift、meta

          （1）、配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

          （2）、配合keycode使用：正常触发事件

        4、也可以使用keycode去指定具体的按键（不推荐）

        5、vue.config.keycodes.自定义键名 = 键码，可以去定制按键别名

        1、prevent：阻止默认事件（常用）

        2、stop： 阻止事件冒泡（常用）

        3、once： 事件只会出发一次（常用）

        4、capture： 使用事件的捕获模式

        5、self： 只有event.target是当前操作元素时才触发事件

        6、passive： 事件的默认行为立即执行，去需等待事件回调执行完毕

Vue v-on:click和methods用法 ， 所有事件修饰符相关介绍案例使用 ， 键盘事件和按键别名详解

文章目录

1. Vue 事件处理

1.1 v-on:click 和 methods

v-on:click="xxx"作用就是当点击时，执行xxx函数。methods就是放置执行函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>你好，{{name}}。</h2>
        <!-- v-on:click="xxx"作用就是当点击时，执行xxx函数。 -->
        <button v-on:click='showInfo'>点击</button>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            data:{
                name:'张三'
            },
            //methods就是放置执行函数。
            methods:{
                //对象里面配置方法，直接写方法名就行。
                showInfo(event){
                    //参数event是事件对象，这里可以打印一下看看event一些属性
                    console.log(event);
                    console.log(event.target.innerText);
                    console.log(this);//这里的this指向的是vm对象。
                }
            }
        });
        vm.$mount("#root");
    </script>
</body>
</html>

如果用箭头函数来显示methods内的函数的话，那么this指向的就是全局，见图如下：


当然，v-on:click也是有简写的就是@click符号。

<button @click='showInfo'>点击</button>

可以通过v-on:click = "xxx(参数1,参数2, …)"的方式来给methods中的xxx函数传递参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>你好，{{name}}。</h2>
        <!-- 这里可以通过( )来传递参数 -->
        <button @click='showInfo(888,$event)'>点击</button>
    </div>

    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            data:{
                name:'张三'
            },
            methods:{
                showInfo(number,event){
                    console.log(number,event);
                }
            }
        });
        vm.$mount("#root");
    </script>
</body>
</html>

此外，methods中的内容是没有做过数据代理的！！


注意事项：
1. 不要将所要调用的函数放到data中去执行，这相当于给函数做数据代理和数据劫持，给函数做数据代理和数据劫持正常情况下是没有意义的，反而拖累程序运行。
2.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。
3.@click=“xxx” 和 @click="xxx($event)"是一样的，效果是一样的，不写参数默认的就是传event对象 ,但是后者可以传参数。

1.2 事件修饰符

1.2.1 事件修饰符

对于事件修饰符总共包括6个：(很重要)

1.2.2 prevent 阻止默认事件

如何阻止一个事件发生，通常我们可以使用preventDefault()可以阻止默认事件的一些行为，但是在Vue中有更好的方法就是@click.prevent 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>你好，{{name}}。</h2>
        <a href="www.baidu.com" @click.prevent = "showInfo">我们去百度。</a>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:"张三"
            },
            methods:{
                showInfo(event){
                    console.log(event);
                    //我们可以使用preventDefault可以阻止当前跳转行为，但是在Vue中有更好的方法就是@click.prevent。
                    // event.preventDefault(); 
                    alert("我阻止你打开百度了。")
                }
            }
        })
    </script>
</body>
</html>

1.2.3 stop 阻止冒泡事件

首先，可以使用event.stopPropagation()方法来阻止冒泡。在Vue中，我们用@click.stop来阻止冒泡事件发生。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .b{
            background-color: blue;
            height: 50px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>{{name}}</h2>
        <div class="b" @click = "showInfo">
            <!-- 我们用@click.stop来阻止冒泡事件发生 -->
            <button @click.stop = "showInfo">冒泡事件</button>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:"冒泡事件"
            },
            methods:{
                showInfo(event){
                    //可以使用event.stopPropagation()方法来阻止冒泡。
                    // event.stopPropagation();
                    alert("我出来了");
                }
            }
        })
    </script>
</body>
</html>

1.2.4 once 事件只触发一次

我们用@click.once来实现事件只触发一次，之后该按钮不管用了。

<div id="root">
    <h2>{{name}}</h2>
        <!-- 我们用@click.once来实现事件只触发一次，之后该按钮不管用了。 -->
        <button @click.once = "showInfo">once事件</button>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            name:"once事件"
        },
        methods:{
            showInfo(event){
                alert("我出来了");
            }
        }
    })
</script>

1.2.5 capture 事件的捕获模式

对于这节内容，我们就要了解捕获阶段和冒泡阶段执行的一个过程。

<div id="root">
    <div class="box1" @click = "showMsg(1)">
        div1
        <div class="box2" @click = "showMsg(2)">
            div2
        </div>
    </div>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            name:"事件"
        },
        methods:{
            showInfo(event){
                alert("我出来了");
            },
            showMsg(msg){
                console.log(msg)
            }
        }
    })
</script>


如果这个时候，使用capture就可以达到先调用div1，在调用div2的内容。

<div id="root">
    <!-- 通过@click.capture来实现，先调用showMsg(1)。 -->
    <div class="box1" @click.capture = "showMsg(1)">
        div1
        <div class="box2" @click = "showMsg(2)">
            div2
        </div>
    </div>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            name:"事件"
        },
        methods:{
            showInfo(event){
                alert("我出来了");
            },
            showMsg(msg){
                console.log(msg)
            }
        }
    })
</script>

1.2.6 self 只有event.target是当前操作的元素时，才触发事件

只有event.target是当前操作的元素时才触发事件 ,我们下面例子的self是div的，并不是button，在我们点击button时，div不会触动。

<div id="root">
    <!-- 只有event.target是当前操作的元素时才触发事件 ,这里的self是div的，并不是button，在我们点击button时，div不会触动-->
    <div class="demo1" @click.self = "showInfo">
        <button @click = "showInfo">点我提示信息</button> 
    </div>
</div>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el:'#root',
        data:{
            name:"事件"
        },
        methods:{
            showInfo(event){
                alert("我出来了");
                console.log(event.target); //这里就是整个button元素和内容
            },
            showMsg(msg){
                console.log(msg)
            }
        }
    })
</script>

1.2.7 passive 事件的默认行为立即执行，无需等待事件回调执行完毕

@scroll 这是滚动条发生滚动。
@wheel 这个是鼠标的滚轮发生滚动。

一定记住scroll和wheel的区别。

一般处理滚动这方面，都是先处理伴随滚动的调用函数事件，函数执行完毕后，才再去执行默认行为(滚动条做动作)。

可以见证一下下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        *{
            margin-top: 20px;
        }
        .list{
            width: 200px; 
            height: 200px;
            background-color: peru;
            overflow: scroll; /*可以解决溢出问题 */
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
    <ul @wheel="demo" class="list" id="root"> 
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:"事件"
            },
            methods:{
                demo(){
                    for(let i=0 ; i<100000;i++){
                        console.log("@");
                    }
                    console.log("执行结束");
                }
            }
        });
    </script>
</body>
</html>


见到上面这种情况，我们就可以使用passive来操作了。

<ul @wheel.passive="demo" class="list" id="root"> 
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

再试试，就可以发现可以滚动了，并且函数也在运行，用passive就可以优先相应滚动条的滚动。

1.3 键盘事件

1.3.1 @keyup 和 @keydown

1. @keydown按键按下去，还没抬起来，事件就触发 。
2. @keyup按键按下去，抬手才触发事件。

下面的案例，就是实现在输入框内输入回车控制台显示输入内容。
细节：

1. event.keyCode记录着很多按键的编码，其中回车的编码是13。
2. event.target.value能获得输入的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到，{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
        <!-- @keydown按下去，还没抬起来，事件就触发 ，@keyup按下去，抬手才触发事件。 -->
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el:'#root',
            data:{
                name:"贝克街"
            },
            methods:{
                showInfo(event){
                    // console.log(event.keyCode); event.keyCode记录着很多按键的编码，其中回车的编码是13。
                    if(event.keyCode !== 13) return
                    console.log(event.target.value); //event.target.value能获得输入的值
                }
            }
        })
    </script> 
</body>
</html>

在Vue中可使用@keyup.enter来提到event.keyCode的if判断语句，来解决回车问题。

<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">

1.3.2 Vue中常用的按键别名

Vue中常用的按键别名：

1. 回车 => enter
2. 删除 => delete (捕获" 删除Delete " 和 " 退格Backspace "键)
3. 退出 => Esc
4. 空格 => space
5. 换行 => tab(和@keydown绑定使用)
6. 向上 => up
7. 向下 => down
8. 向左 => left
9. 向右 => right

相应的，上面没有的键要如何设置呢？

当然，最先想到的就是event.keyCode的方式。但这里我们用event.key。

1. event.keyCode : 输出的是按键的编码。
2. event.key : 输出的是按键名，这里的按键名就是上面Vue别名的原型。
3. 综上所述，Vue没有提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为（短横线方式命名，就像下面的CapsLock一样）。

对于多个单词的按键，举个例子，如用CapsLock按键(切换大小写)，来实现：

<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">

这里的CapsLock是两个单词连在一起的，就要分开和小写变成caps-lock。

除此之外，一些特有的按键是不可以拿来使用的。

注意：
上面这些tap键比较特殊，因为tap是切换光标。tap按键最好和@keydown来绑定。如下：

<input type="text" placeholder="按下回车提示输入" @keydown.tab="showInfo">

1.3.3 系统修饰键 (用法特殊)

比较特殊的系统修饰符：

ctrl ，alt ， shift， meta(win键) 这四个按键。

四个按键的用法：

1. 配合keyup使用：按下修饰键的同时，在按下其他键，随后释放其他键，事件才被触发。
2. 配合keydown使用：正常触发事件。

一定注意和keyup的使用。

1.3.4 用keyCode去指定具体的按键(可以，但不推荐)

enter的keyCode为13，也可以写成下面的形式：

<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">

我们也可以设置keyCode对应的别名：

Vue.config.keyCodes.rename = 13

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>欢迎来到，{{name}}</h2>
        <input type="text" placeholder="按下回车提示输入" @keydown.rename="showInfo">
    </div>
    <script>
        Vue.config.productionTip = false;
        Vue.config.keyCodes.rename = 13;
        const vm = new Vue({
            el:'#root',
            data:{
                name:"贝克街"
            },
            methods:{
                showInfo(event){
                    console.log(event.target.value); 
                }
            }
        })
    </script> 
</body>
</html>

2. 事件总结

第一章内容有点多，没办法，看完就能学会这一节的内容，咬咬牙就能过去。

小技巧：

1. 每一个事件是可以重叠的。


但是，顺序不同，不一样，就像上面先阻止了跳转，再阻止了冒泡。

2. 对于ctrl，比如我们向要用ctrl + y 这个按键来实现。可以定义为下面这样可以。

以上是关于键盘事件、事件修饰符的主要内容，如果未能解决你的问题，请参考以下文章

29.VUE学习之--键盘事件.键盘修饰符的实例讲解

Vue中的事件修饰符 键盘事件 监视属性watch 深度监视 简写

Vue v-on:click和methods用法 ， 所有事件修饰符相关介绍案例使用 ， 键盘事件和按键别名详解

Vue常用修饰符

4.键盘修饰符以及自定义键盘修饰符

Vue:Vue事件整理