【Vue3】Vue的事件监听和处理

早睡早起长头发

已于 2023-01-05 11:25:32 修改

阅读量4.7k

点赞数

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

于 2022-08-15 17:29:08 首次发布

本文链接：https://blog.csdn.net/weixin_51481135/article/details/126350249

版权

Vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、事件监听

是通过v-on指令(用@符号代替)绑定事件处理程序。

二、多事件的处理

对于同一个用户交互事件，需要调用多个方法进行处理

1.获取事件类型：$event

2.多事件处理的语法格式：@事件名 = “方法1,方法2”

<!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://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app">
        <div>点击次数 {{ count }}</div>
        <!-- +1 -->
        <!-- <button @click="myclick">点击</button> -->
        <!-- +2 -->
        <!-- <button @click="myclick(2)">点击</button> -->
        <!-- 处理多个方法 -->
        <button @click="myclick(2),logs($event)">点击</button>
    </div>
    <script>
        const obj = {
            data() {
                return {
                    count: 0
                }
            },
            methods: {
                // 第一个方法
                myclick(step) {
                    // +1
                    // this.count += 1
                    // +2
                    this.count += step
                    // 一个函数的复合功能，最好不要用。因为模块功能要高内聚（一个模块功能越单一越好）、低耦合（模块和模块间要互相依赖）
                    // console.log(event)
                },
                // 第二个方法
                logs(event) {
                    console.log(event)
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>

三、事件修饰符

1.DOM的事件原理：

首先会从父组件开始依次传递到子组件——事件捕获

其次当事件传递到最内层的子组件时，会逆向再进行一次传递，从子组件依次向上传递 — 事件冒泡

2.Vue中使用v-on指令绑定事件时默认监听的是DOM事件的冒泡阶段

<!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://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <div id="d1" @click="click1" style="border: solid red  1px;">
            外层
            <div id="d2" @click="click2" style="border: solid blue  1px;">
                中间
                <div id="d3" @click="click3" style="border: solid green  1px;">
                  内层
                </div>
            </div>
        </div>
    </div>
    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中间')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

3.如果需要监听捕获阶段的事件,在Vue中使用capture事件修饰符来实现

<!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://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <div id="d1" @click.capture="click1" style="border: solid red  1px;">
            外层
            <div id="d2" @click.capture="click2" style="border: solid blue  1px;">
                中间
                <div id="d3" @click.capture="click3" style="border: solid green  1px;">
                  内层
                </div>
            </div>
        </div>
    </div>
    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中间')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

4.阻止事件的传递：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://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <div id="d1" @click.stop="click1" style="border: solid red  1px;">
            外层
            <div id="d2" @click.stop="click2" style="border: solid blue  1px;">
                中间
                <div id="d3" @click.stop="click3" style="border: solid green  1px;">
                  内层
                </div>
            </div>
        </div>
    </div>
    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中间')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

5、只触发一次事件：once

<!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://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
        <div id="d1" @click.once="click1" style="border: solid red  1px;">
            外层
            <div id="d2" @click.once="click2" style="border: solid blue  1px;">
                中间
                <div id="d3" @click.once="click3" style="border: solid green  1px;">
                  内层
                </div>
            </div>
        </div>
    </div>
    <script>
        const obj={
            methods:{
                click1(){
                    console.log('外层')
                },
                click2(){
                    console.log('中间')
                },
                click3(){
                    console.log('内层')
                }
            }
        }
        Vue.createApp(obj).mount('#app')
    </script>
</body>
</html>

6、禁止默认事件：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://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app">
    <a href="http://www.baidu.com" @click.prevent="myclick">百度</a>
    </div>
    <script>
        const obj={
         data(){
            methods:{
        myclick:{
            console.log('点击成功')
        }
            }
         }
        }
        Vue.createApp('obj').mount('#app')
    </script>
</body>
</html>