3.Vue—绑定事件、事件修饰符、键盘事件（详细）

柔光的暖阳◎ 2024-04-08 13:14 89阅读 0赞

**目录**

一、绑定事件

1.1 简单事件回调

1.2 传入参数

1.2.1 调用时无参

1.2.2 调用时传参

1.2.3 细节问题

二、事件修饰符

2.1 prevent 阻止默认事件

2.2 stop 阻止事件冒泡

2.3 once 事件只触发一次

2.4 capture 事件捕获模式

2.5 self

2.6 passive

三、键盘事件

3.1 演示

3.2 特定案件时触发函数

--------------------

## 一、绑定事件 ##

*  **只要和事件有关系的，都是“v-”开头**
    
    **使用v-on:xxx 或 @xxx绑定事件，其中xxx是事件名**，比如v-on:click="showInfo"就是当点击的时候执行一个showInfo回调函数
    
    > v-on:click="showInfo"可以简写成@click="showInfo"
 *  **事件的回调需要配置在methods对象中，最终会在vm上**
 *  **methods中配置的函数，不用箭头函数！否则this就不是vm了**
    
    methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
 *  **@click="demo" 和 @click=“demo（$event）”效果一致，但后者可以传入参数**

### 1.1 简单事件回调 ###

点击button按钮出现一个提示信息

<body>
        
        <div id="root">
            <h2>欢迎来到{
       {name}}</h2>
            <button v-on:click="showInfo"> 点我提示信息 </button>
        </div>
    
        <script type="text/javascript">
            //关闭开发环境时的生产提示
            Vue.config.productionTip = false
    
            // 如果我们把showInfo定义在Vue实例之外，root容器中是无法找到的
    
            new Vue({
                el: "#root",
                data: {
                    name:"济南"
                },
                //在这个地方能配置许多事件的回调
                methods: {
                    showInfo() {
                        alert("你好啊你好啊")
                    }
                },
            })
        </script>
    
    </body>

点击下图中的按钮，会有提示信息

![image-20231028201935426][]

![image-20231028201956354][]

### 1.2 传入参数 ###

#### 1.2.1 调用时无参 ####

<button v-on:click="showInfo"> 点我提示信息 </button>

其他的地方不变，我们将方法设置参数

methods: {
                    showInfo(a,b,c,d) {
                        console.log(a,b,c,d)
                    }
                }

查看控制台，然后发现只有a有值，其他的b、c、d都是undefined

![image-20231028203121453][]

而a对应的值就是事件对象。

我们点了一个按钮，他们会帮我们调用函数，默认帮我们传了一个时间对象的参数event.

event.target表示拿到发生事件的事件目标，在这里也就是button按钮

event.target.innerText表示拿到button按钮中的元素

methods: {
         showInfo(event) {
            console.log(event.target.innerText)
         }
    }

最重要的是，showInfo里面的this指代的也是Vue实例对象

![image-20231028203616371][]

--------------------

下面两个传参方式其实是一个样子的,因为第一个button他也会默认给传event

<button v-on:click="showInfo"> 点我提示信息 </button>

<button v-on:click="showInfo($event)"> 点我提示信息 </button>

#### 1.2.2 调用时传参 ####

$event是一个关键词，解析下面的代码的时候会发现$event，就把$event传到showInfo2方法里面了

<button v-on:click="showInfo2($event,66)"> 点我提示信息 </button>

传入时，我们调用showInfo2方法不仅要接收到event，也要接收到一个数值

showInfo2(event,number) {
       alter("2.同学你好啊")
    }

#### 1.2.3 细节问题 ####

下面这段代码有一个细节的问题。

showInfo1与showInfo2最终也是在VM身上

new Vue({
                el: "#root",
                data: {
                    name:"济南"
                },
                //在这个地方能配置许多事件的回调
                methods: {
                    showInfo1(event) {
                        console.log(event.target.innerText)
                    },
                    showInfo2(event,number) {
                        alter("2.同学你好啊")
                    }
                },
            })

"name"与showInfo1、showInfo2的区别就是name做了数据代理，而我们的showInfo1、showInfo2没有做数据代理

"name"从根上说是来自"\_data"里

![image-20231028205356637][]

我们可以找到"name"的getter和setter，但是找不到showInfo1、showInfo2的

![image-20231028205541016][]

**方法为什么不做数据代理**？

name做数据代理时因为他的值会改变，但是我们的showInfo1、showInfo2方法写完就写完了，方法体的代码不会改，只等着被调用就好了

## 二、事件修饰符 ##

### 2.1 prevent 阻止默认事件 ###

准备好下面的代码

<div id="root">
            <a href="http://www.baidu.com" @click="showInfo">点我提示信息</a>
        </div>
    
        <script type="text/javascript">
            //关闭开发环境时的生产提示
            Vue.config.productionTip = false
    
            new Vue({
                el:"#root",
                data:{
    
                },
                methods: {
                    showInfo(){
                        alert("同学您好")
                    }
                },
    
            })
        </script>

现在的页面情况是有一个超链接

![image-20231028212254109][]

点击超链接后会有一个提示框

![image-20231028212311116][]

点击“确定”之后会跳转好href所指定的页面

![image-20231028212344701][]

**但是如果我们不想让a标签跳转到指定的地址，怎么办**？

<div id="root">
                <h2>欢迎来到{
       {name}}学习</h2>
                <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>
            </div>

此时当我们点击“确认”按钮之后，页面不会跳转到href指定的页面

![image-20231028212828861][]

**或者是使用下面的方式**(使用的较少)

<a href="http://www.atguigu.com" @click="showInfo">点我提示信息</a>

methods: {
                    showInfo(event){
                        alert("同学您好")
                        event.preventDefault();
                    }
                },

### 2.2 stop 阻止事件冒泡 ###

<div class="demo1" @click="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>

当我们点击按钮一次的时候，页面会连续弹出两次弹框

![image-20231028213624055][]

![image-20231028213704202][]

**但是我们加上@click.stop之后，只会出现一次弹框**

<div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
    </div>

正常情况下，当我们点击按钮的时候会出现两次弹窗（就我们上面这个代码而言），但是在实际操作中并没有出现两次弹窗（冒泡）

**原因是@click.stop**。当我们使用时，就阻止事件冒泡，我们点击按钮时，仅仅会出发按钮的弹窗，并不会触发div的弹窗。

**那他是阻止的div的弹框还是button的**？

showInfo1(event) {
                        alert("同学您好111")
                        event.preventDefault();
                    },
                    showInfo2(event) {
                        alert("同学您好222")
                        event.preventDefault();
                    }

<div class="demo1" @click="showInfo1">
        <button @click.stop="showInfo2">点我提示信息</button>
    </div>

弹出的是下面这个提示，说明阻止的是外面div的弹框

![image-20231028214402618][]

### 2.3 once 事件只触发一次 ###

<button @click.once="showInfo">点我提示信息</button>

我们单击按钮的时候，通常情况下不论我们点击几次，都会出现弹框，但是当我们加了@click.once之后，这个按钮只能单击一次，第二次及其以后不再出现弹窗

### 2.4 capture 事件捕获模式 ###

**JS中的事件流分为捕获阶段和冒泡阶段**

下面两个div都能够响应点击事件

<div class="box1" @click="showMsg(1)">
                    div1
                    <div class="box2" @click="showMsg(2)">
                        div2
                    </div>
                </div>

showMsg(number){
       console.log(number)
    }

当我点击“div1”时，控制台输出“1”

![image-20231028215444015][]

当我点击“div2”时，控制台输出先输出“2”，再输出“1”

![image-20231028215528676][]

如果我们将代码改成下面的样子,**增加“capture”**

<div class="box1" @click.capture="showMsg(1)">
                    div1
                    <div class="box2" @click="showMsg(2)">
                        div2
                    </div>
                </div>

正常情况下， 是先捕获再冒泡，例如上面正常的代码中先捕获box1再捕获box2，之后box2冒泡再box1冒泡，控制台上先输出2再输出1

但是我们添加了@click.capture之后，我们会发现当我们在捕获box1的时候，也完成了box1的冒泡，最终控制台上的输出内容是先1再2

**当我点击“div1”时，控制台输出“1”**

![image-20231028215444015][]

**当我点击“div2”时，控制台输出先输出“1”，再输出“2”**

### 2.5 self ###

**self 只有event.target是当前操作的元素时才出发的事件**

下面这段代码会先出button的弹框，会再弹出div的弹框，点击按钮会弹出两个框

<div class="demo1" @click="showInfo">
             <button @click="showInfo">点我提示信息</button>
         </div>

![image-20231028220459291][]

然后我们**修改一下代码**

<div class="demo1" @click="showInfo">
             <button @click="showInfo">点我提示信息</button>
    </div>

showInfo(event) {
      console.log(event.target)
    },

**此时控制台会有两个提示，都是button**，一个是button的，一个是div的

div的提示是冒泡冒上去的

> event.target的结果是button很好理解，以为我们点击的就是button按钮

![image-20231028220819320][]

**再修改一下代码**

当我们添加.self的，我们再点击按钮，只会出现一个，那就是按钮所绑定的函数运行，上面那个div便不会再运行（这个.self也可以说变相的阻止了冒泡）

<div class="demo1" @click.self="showInfo">
             <button @click="showInfo">点我提示信息</button>
         </div>

![image-20231028221042373][]

### 2.6 passive ###

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

demo(){
      console.log("滚动")
    }

当我们的**滚动条滚动时，会触发demo函数**

**@scroll是滚动条滚动事件**，当滚动条动时，就能触发

![image-20231028222042075][]

**下面这个，只要鼠标的滚轮动，就能触发函数**

**触发流程**：先滚动滚轮-->触发demo函数--->demo函数完成后再触发滚动条滚动效果

**@wheel是滚轮滚动事件**

下面这个代码后**加了passive，当我们的demo函数没有执行完时，滚动条也会滑动**

## 三、键盘事件 ##

**keydown 按钮某个键时**

**keyup 抬起某个键时**

### 3.1 演示 ###

showInfo(event){
       console.log(event.target.value)
    }

查看页面，在文本框中输入文字

![image-20231028224150067][]

### 3.2 特定案件时触发函数 ###

**原始方法**,我们一般不使用这种方式了

showInfo(e){
        //为了不是每一个案件都能触发，我们规定只有回车才能触发
        //回车的键盘码是13，当不是13的时候，就结束函数，不运行console
        if(e.keyCode!==13)
          return
        console.log(e.target.value)
    }

**如今的方式@keyup.enter**,只有回车时才触发，

showInfo(event){
       console.log(event.target.value)
    }

**这个enter就是别名**，除此之外还有其他的

*  **回车 enter**，它真正的名字是Enter，enter只不过是Vue给其起的别名，以下七个也是这种情况
 *  **删除 delete**（捕获“删除delete”和“退格backspace”键）
 *  **退出 esc**
 *  **空格 space**
 *  **换行 tab** （特殊，必须配合keydown去使用，@keydown.tab）
 *  **上 up**
 *  **下 down**
 *  **左 left**
 *  **右 right**
    
    --------------------
    
    --------------------
    
    1.  **Vue未提供别名的按键，可以使用按键原始的key值去绑定**，但注意要转化为kebab-case（短横线命名，两个不同的单词之间用短横线连接）
        
        假如按键名字叫CapsLock时，我们应该下面这个样子配置
    
        @keyup.caps-lock="showInfo"
    
    1.  **怎么获取案件的编码和名字**？
    
    event.key是案件的名字，event.keyCode是案件的编码
    
        showInfo(event.key,event.keyCode){
            console.log(event.key)
            console.log(event.keyCode)
        }
    
    1.  **系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）**
        
        > 这四个键配合keyup都是有问题的
        
        ①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
        
        > 比如说我按下“ctrl”，再按下“y”，松手后才会触发事件
        
        ②配合keydown使用：正常触发事件
    2.  **Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名**（不推荐）
    
        @keyup.huiche="showInfo"
    
        Vue.config.keyCodes,huiche =13 //定义了一个别名按键

[image-20231028201935426]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/2a86cac928e8498ca95fdd3e9facbd3c.png
[image-20231028201956354]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/a1b930bd475444b4bd93615b6ef143fa.png
[image-20231028203121453]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fadc146ae4f94257be06e9fe7bfac54c.png
[image-20231028203616371]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/847f5fe09da54236a2de66ad4e40da9c.png
[image-20231028205356637]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/34435d000a3a4163940249fc03208bf3.png
[image-20231028205541016]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/7c5be70428c34b4abbd961259599ffa2.png
[image-20231028212254109]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3b08a0e1964940098098d4f032481755.png
[image-20231028212311116]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/516182c087f640ae8091c5b087d5efa9.png
[image-20231028212344701]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/f9b0f46b03c24e82a51666899f2617b2.png
[image-20231028212828861]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/e4dc2b80e1d9483a8cdbb65866ded475.png
[image-20231028213624055]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/0cc5944863e74d6c9ecf999e5902f42e.png
[image-20231028213704202]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5f54322779034db3b88ecad2b46dccb9.png
[image-20231028214402618]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8ab2424e98bb46f294e819837d630d31.png
[image-20231028215444015]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/3d77971033c14273b1b40ba2642e6ead.png
[image-20231028215528676]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/d1dc50fd44db49ef8723d79e738f14d8.png
[image-20231028220459291]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/368e0362ee3e48a598066cfb367056a2.png
[image-20231028220819320]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/236f37989cbc4297823c7538ff5e4cc3.png
[image-20231028221042373]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1a5153225b0d4a1a9b3186b733d7496a.png
[image-20231028222042075]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/26bb8b6756f544bd855568187952964d.png
[image-20231028224150067]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/fb9fcf5b314f48238dc836c1303d5fc4.png