Vue2.0学习笔记3：事件

窝窝头一块钱4.1个

已于 2022-10-25 17:08:10 修改

阅读量291

点赞数 1

分类专栏： vue2基础知识文章标签： vue.js javascript 前端

于 2022-10-19 22:09:42 首次发布

本文链接：https://blog.csdn.net/W__J__J/article/details/127383760

版权

vue2基础知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

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

一、事件处理

1.绑定事件：

使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名，如

    <button v-on:click="showInfo1">提示信息1</button><br>
    <button @click="showInfo2(66,$event)">提示信息2</button><br>

2.事件的回调

需要配置在methods对象中，最终会出现在vm上。vm是Vue的实例对象，其中只有data对象会出现数据代理，而methods对象不会出现数据代理。

mwthods中配置的函数，不能用箭头函数，否则this就不是vm了。此时，methods中所配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象

如

    new Vue({
        el:'#root',
        data:{
            name:'hnucm'
        },
        methods:{
            showInfo1(event){
                console.log(event.target.innerText) //控制台输出事件中的文本信息
                alert('同学你好')
            },
            showInfo2(number,a){
                console.log(number,a)
            }
        }
    })

注意：事件的回调默认出现在事件的默认行为之前。在这里事件的回调是实例中的函数。例如：

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <a href="http://www.4399.com" @click="showInfo">点我去学习</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            showInfo(e){
                alert('确定要去学习？')
            }
        }
    })

</script>

在上面的例子中，弹窗在事件的回调中，而页面的跳转是事件的默认行为。所以，弹窗出现在页面跳转之前

3.传递参数

使用@click="demo" 和 @click="demo($event)" 都可以绑定事件，但是后者可以传递参数。需要传递event参数时，可以加上$event来传递event对象。

注意：传递的参数与接受的参数顺序需要保持一致

二、事件修饰符

1.事件修饰符的用处：

顾名思义，“事件修饰符”是用来修饰事件的。Vue.js为v-on提供了事件修饰符，修饰符是由点开头的指令后缀来表示的。它可以更加方便的处理在事件的执行的各种需要，如默认事件的出现、事件触发次数等。

2.Vue中的事件修饰符

1.prevent：阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只能触发一次（常用）
4.capture：使用事件的捕获模式
5.self：只有event.target是当前操作的元素时才是触发事件
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

1.prevent：阻止默认事件：

阻止行为如点击中会出现的默认行为。

在下面的例子中，默认的行为就是页面跳转，而@click.prevent="showInfo" 则阻止了这个行为。所以页面只是跳出弹窗，并不进行跳转：

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!--  prevent：阻止默认事件（常用）  -->
    <a href="http://www.4399.com" @click.prevent="showInfo">点我去学习</a>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            showInfo(e){
                // e.preventDefault()  //阻止点击会出现的默认行为
                alert('确定要去学习？')
            }
        }
    })

</script>

2.stop：阻止事件冒泡：

首先了解两个概念：

事件捕获：从字面意思上看，就是事件的捕获。事件的捕获是从父级传播到子级的（由外向内）。

事件冒泡：事件的传播。事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理（由内向外）。

事件先捕获，再冒泡

问题提出：假如有一个按钮，它和它的父级都绑定了相同的事件，当我们点击它时，这个事件就会被执行两次。

而阻止事件冒泡，就是为了解决这类事情。

在下面的例子中，原本弹窗在按下按钮“点我去学习1”后将出现两次，而使用@click.stop="showInfo" 将会阻止事件冒泡，使其只出现一次。需要注意的是，如果<div>还有父节点也可能出现冒泡，则<div>也需要stop。

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!--  stop：阻止事件冒泡（常用）  -->
    <div @click="showInfo">
        <button @click.stop="showInfo">点我去学习1</button>
    </div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            showInfo(e){
                //e.stopPropagation()     //阻止事件冒泡
                alert('确定要去学习？')
            }
        }
    })

</script>

3.once：事件只能触发一次

表示在页面中这个点击事件只能触发一次，之后再点击按钮事件就不触发了

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <button @click.once="showInfo">点我去学习1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            showInfo(e){
                alert('确定要去学习？')
            }
        }
    })

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

上面已经提到，事件先捕获，再冒泡，并且捕获阶段是由外向内的，冒泡阶段是由内向外的。使用事件的捕获模式，可以使得事件的响应顺序发生变化，使其由外向内发生相应。

下面的例子中，点击里面的div2，在弹窗中出来的顺序是先1后2

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
<!--  capture：使用事件的捕获模式  -->
    <div @click="showMsg(1)">div1
        <div @click.capture="showMsg(2)">div2</div>
    </div>

</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            showMsg(msg){
                alert(msg)
            }
        }
    })

</script>

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

event.target是触发事件的对象的引用。可以粗略的认为是触发该事件的某个元素（DOM）的引用。

使用self事件修饰符后，被修饰的元素被点击才是触发事件的唯一条件。

在下面的例子中，触发弹窗“1”的条件变成了点击div1，而无法点击按钮来通过冒泡来触发它了

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
<!--  self：只有event.target是当前操作的元素时才是触发事件  -->
    <div @click.self="showMsg(1)">div1
        <button @click="showInfo">点我去学习2</button>
    </div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            showInfo(e){
                alert('确定要去学习？')
            },
            showMsg(msg){
                alert(msg)
            }
        }
    })

</script>

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

一般的，在事件响应时，回调默认在事件的默认行为之前。在使用passive事件修饰符后，使得事件可以先执行它的默认行为，而无需等待事件回调执行完毕。

在下面这个例子中，如果没有passive事件修饰符，那么滚动鼠标滚轮后，会先执行回调，而回调中的函数（这里是for循环）较为耗时，所以会导致事件的默认行为（这里是无序列表的滚动）不能按时执行。而使用passive后，问题得到了解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <style>
        .list{
            width: 200px;
            height: 200px;
            background: gold;
            overflow: auto;
        }
        li{
            height: 100px;
        }
    </style>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
<!--  passive：事件的默认行为立即执行，无需等待事件回调执行完毕  -->
<!--  scroll:键盘或者鼠标滚轮使得界面滚动时触发，单位px  -->
<!--  wheel:鼠标滚轮滚动时触发，单位是鼠标滚轮触发的次数  -->
    <ul class="list" @wheel="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399小游戏'
        },
        methods:{
            demo(){
                for(let i=0;i<10000;i++){
                    console.log('#')
                }
                console.log('累坏了')
            }
        }
    })

</script>
</body>
</html>

三、键盘绑定

1.介绍

当我们想要通过键盘按键来触发事件（例如按下回车，页面出现弹框）时，键盘绑定就可以给我们发挥作用了。

通过在事件绑定的前面加上键盘绑定，来绑定事件。

例如想要在输入文本时，按下Enter键触发弹窗，Enter键的别名在Vue中就是enter。示例代码如下：

<!--键盘事件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!--  keydown:在键盘按下时触发      keyup:在键盘松开时触发  -->
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399'
        },
        methods:{
            showInfo(e){
                alert(e.target.value)        //显示文本框中的值
            }
        }
    })

</script>
</body>
</html>

2.用法

在Vue中，一些常用的按键是有别名的，方便使用。没有提供别名的按键，可以通过其他方法来进行键盘绑定

1.Vue中的按键别名：
    回车 => enter
    删除 => delete (捕获“删除”和“退格”键)
    退出 => esc
    空格 => space
    换行 => tab   (特殊，需要配合keydown使用)
    上 => up
    下 => down
    左 => left
    右 => right
2.Vue中未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名：key值中的大写字母全转为小写，单词之间用短横线隔开)
3.系统修饰键(用法特殊):ctrl、alt、shift、meta(win)
    (1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才触发
    (2)配合keydown使用：正常触发事件
4.也可以使用keyCode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 = 键码  ，可以去定制按键别名

1.Vue中的按键别名

Vue中的按键别名在上一个示例中使用过了，故不再演示。

2.Vue中未提供别名的按键

未提供别名的按键，可以通过它原始的key值绑定（注意不是keyCode）

但是注意：使用的时候需要将key的每一个单词小写，并且单词之间需要有短横线作为分隔。如（CapsLk = caps-lock）

示例：

<!--键盘事件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!--  keydown:在键盘按下时触发      keyup:在键盘松开时触发  -->
    <input type="text" placeholder="按下大小写切换提示输入" @keyup.caps-lock="showInfo">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399'
        },
        methods:{
            showInfo(e){
                alert(e.target.value)       //显示文本框中的值
            }
        }
    })

</script>
</body>
</html>

3.系统修饰键

ctrl、alt、shift、meta(win)是比较特殊的键。

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

例如cirl+i或者ctrl+x亦或者ctrl+p都可以使得事件触发，当且仅当ctrl的x(可以是任何键)释放的时候，事件才被触发。

当我们想要使得只有在ctrl+x时事件才被触发，可以这样：

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

这个x键也可以替换成其他的键。

2.在配合keydown使用时，才是正常触发事件。

需要注意的是，虽然TAB键不属于系统修饰键的一种，但它的功能主要是元素间焦点的切换，所以需要配合keydown使用才有效。

4.使用keyCode

因为keyCode在规定中已经被废弃使用，虽然在有些浏览器中仍然支持，但是建议最好不去使用。

如何知道一个键的keyCode值呢？如下面的示例，可以通过控制台输出得到它的keyCode值

<!--键盘事件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{name}}学习</h2>
    <!--  keydown:在键盘按下时触发      keyup:在键盘松开时触发  -->
    <input type="text" placeholder="按下大小写切换(CapsLk)提示输入" @keyup.caps-lock="showInfo">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:'#root',
        data:{
            name:'4399'
        },
        methods:{
            showInfo(e){
                // alert(e.target.value)       //显示文本框中的值
                console.log(e.key,e.keyCode)   //显示该键的key值和keyCode值
            }
        }
    })

</script>
</body>
</html>

在文本框中按下CapsLk后，控制台得到了keyCode：