【vue学习】— 事件监听

1. 事件监听

在前端开发中，我们经常需要监听浏览器的时间，例如点击、拖拽、键盘等操作。那么在vue中是如何监听事件的呢？那就是使用v-on指令

1.1 介绍

• 作用：绑定事件监听器
• 缩写：@
• 预期：Function | Inline Statement | Object
• 参数：event

1.2 简单使用

• 我们可以在事件中写表达式
• 也可以将事件指向一个在methods中定义的函数

 <div id="app">
    <h2>点击次数：{{count}}</h2>
     <button @click="count++">点击+1</button>
     <button @click="increment">点击+1</button>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             increment(){
                 this.count++;
             }
         }
     })
 </script>

1.3 参数问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

1. 如果该方法不需要额外参数，那么在调用该方法时可以不加()
2. 如果方法本身有一个参数，那么会默认将原生事件event参数传递进去
3. 如果需要传入某个参数时，同时还需要event,可以通过**$event**传入事件

<div id="app">
    <h2>点击次数：{{count}}</h2>
     <button @click="incrementone">点击+1</button>
     <button @click="incrementcount(10,$event)">点击+10</button>
 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             incrementone(event) {
                 console.log(event);
                 this.count++;
             },
             incrementcount(count, event) {
                 console.log(event);
                 this.count += count;
             }
         }
     })

1.4 修饰符

在某些情况下，我们拿到事件的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

• .stop:阻止事件冒泡
• .self:当事件在该元素本身触发时才触发事件
• .capture:添加事件监听器，使用事件捕获模式
• .prevent:阻止默认事件
• .once:事件只触发一次

1.4.1 事件冒泡定义

要想搞明白上面这些修饰符功能，首先我们先了解一下什么是事件冒泡：

<div id="app">
    <h2>点击次数：{{count}}</h2>
     <div class="outer" @click="outerClick">
         <div class="inner" @click="innerClick">
             <button @click="btnClick">点击</button>
         </div>
     </div>

 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             outerClick() {
                 console.log('触发了outer点击事件');
             },
             innerClick() {
                 console.log('触发了inner点击事件');
             },
             btnClick() {
                 console.log('触发了btn点击事件');
             }
         }
     })
 </script>

1. 当点击btn按钮时，会从里到外依次触发按钮点击事件、inner点击事件、outer点击事件

2. 当点击inner div时，会从里到外依次触发inner点击事件、outer点击事件

3. 当点击outer div时，只触发outer点击事件

4. 这就是事件冒泡

1.4.2 阻止事件冒泡(.stop)

<div id="app">
     <p>.stop可以实现点击按钮的时候，只触发按钮点击事件，阻止了事件冒泡</p>
     <div class="outer" @click="outerClick">
         <div class="inner" @click="innerClick">
             <button @click.stop="btnClick">点击</button>
         </div>
     </div>

 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             outerClick() {
                 console.log('触发了outer点击事件');
             },
             innerClick() {
                 console.log('触发了inner点击事件');
             },
             btnClick() {
                 console.log('触发了btn点击事件');
             }
         }
     })
 </script>

如图所示：

当只点击btn按钮时，只触发了按钮的时间，没有触发div的事件，这就是阻止事件冒泡

1.4.3 当事件在该元素本身触发时才触发事件(.self)

	<h2>.self当事件在该元素本身触发时触发回调（比如 不是子元素）</h2>
     <div class="outer" @click="outerClick">
         <div class="inner" @click.self="innerClick">
             <button @click="btnClick">点击</button>
         </div>
 	<p>.self只能阻止自己身上冒泡行为，并不会真正的阻止冒泡行为</p>
    <p>只给inner div 加.self，当点击按钮时，会从里到外依次触发按钮点击事件、outer点击事件</p>
    <p>而不会触发inner点击事件，跳过了inner div冒泡</p>
    <p>当点击inner div时，依然会从里到外依次触发inner点击事件、outer点击事件</p>

     </div>

1.4.4 阻止事件默认行为(.prevent)

<div id="app">
    
     <a href="http://www.baidu.com" @click.prevent="preventClick">百度一下</a>

 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             preventClick() {
                 console.log("阻止了a标签的默认点击跳转事件")
             }
         }
     })
 </script>

点击只会触发preventClick事件，不会跳转页面，阻止了a标签的默认跳转 。

1.4.5 只触发一次事件(.once)

<div id="app">

     <button @click.once="onceClick">点击</button>

 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             onceClick() {
                 console.log('只触发了一次事件');
             }
         }
     })
 </script>

顾名思义，该点击事件就算多次点击，也只会触发一次。

1.4.6 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

按键别名：
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

注意：在Windows系统键盘上meta对应windows徽标键(⊞)。

<div id="app">
        // Enter键触发submit事件  下面三种写法都对
        <input type="text" v-on:keyup.enter="submit" />
        <input type="text" @keyup.enter="submit" />
        <input type="text" @keyup.13="submit" />
    </div>
 
    <script>
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                submit() {
                    console.log("enter键触发事件");
                }
            }
        });
    </script>

1.4.7 串联修饰符

<div id="app">
     <div class="outer" @click="outerClick">
         <div class="inner" @click="innerClick">
             <a href="http://www.baidu.com" @click.stop.prevent="btnClick">百度一下</a>
         </div>
     </div>

 </div>
 <script src="../js/vue.js"></script>

 <script>
     const app = new Vue({
         el:'#app',
         data:{
             count:0
         },
         methods:{
             outerClick() {
                 console.log('触发了outer点击事件');
             },
             innerClick() {
                 console.log('触发了inner点击事件');
             },
             btnClick() {
                 console.log('触发了btn点击事件');
             }
            
         }
     })
 </script>

@click.stop.prevent:既阻止了事件的默认行为，又阻止了事件冒泡。