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

我爱布朗熊

已于 2023-10-29 14:38:51 修改

阅读量1.2k

点赞数 3

分类专栏： Vue 文章标签： javascript 前端 vue.js

于 2022-08-28 19:25:38 首次发布

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126571549

版权

Vue 专栏收录该内容

26 篇文章 8 订阅

订阅专栏

一、绑定事件

只要和事件有关系的，都是“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>

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

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

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

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

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

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

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

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

下面两个传参方式其实是一个样子的,因为第一个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"里

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

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

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>

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

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

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

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

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

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

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

<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>

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

但是我们加上@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的弹框

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”

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

如果我们将代码改成下面的样子,增加“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”

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

2.5 self

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

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

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

然后我们修改一下代码

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

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

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

div的提示是冒泡冒上去的

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

再修改一下代码

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

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

2.6 passive

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

    <style>
        .list {
            width: 200px;
            height: 200px;
            background-color: peru;
            overflow: auto;
        }

        li {
            height: 100px;
        }
    </style>

        <ul @scroll="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

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

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

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

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

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

@wheel是滚轮滚动事件

        <ul @wheel="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

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

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

三、键盘事件

keydown 按钮某个键时

keyup 抬起某个键时

3.1 演示

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

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

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

3.2 特定案件时触发函数

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

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

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

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

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 //定义了一个别名按键
```

我爱布朗熊

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
3.Vue—绑定事件、事件修饰符、键盘事件（详细）

我们单击按钮的时候，通常情况下不论我们点击几次，都会出现弹框，但是当我们加了@click.once之后，这个按钮只能单击一次，第二次及其以后不再出现弹窗。当我们添加.self的，我们再点击按钮，只会出现一个，那就是按钮所绑定的函数运行，上面那个div便不会再运行（这个.self也可以说变相的阻止了冒泡）但是我们添加了@click.capture之后，我们会发现当我们在捕获box1的时候，也完成了box1的冒泡，最终控制台上的输出内容是先1再2。否则this就不是vm了。右 right。...
复制链接

扫一扫