事件处理基础

Vue Comments

vue的事件修饰符：

  1. prevent：阻止默认事件（常用） ——@click.prevent
  2. stop:阻止事件冒泡
  3. once：事件只触发一次。（常用）
  4. capture：使用事件的捕获模式
    tip:捕获模式：
    先从外层开始捕获到点击
  5. sefl:只有event.target是当前操作的元素时才触发事件——也可用作防止事件冒泡
  6. passive：事件的默认行为立即执行，无须等待时间回调执行完毕。

修饰符饰符特点：

  • 可以连续写：
    • EG:@click.prevent.stop(阻止默认行为+阻止冒泡)

额外的知识：

  1. scroll为滚动条滚动事件，滚动条抵达边缘后不再出发
  2. wheel为鼠标滚轮滚动事件，滚动条抵达边缘后依旧触发

以下为各个修饰符用法的介绍

这是一个全局的例子，接下来让我们来细细诉说

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<head>
<style>
        *{
            margin-top: 20px;
        }
        .box1{
            background-color: aqua;
        }
        .box2{
            background-color: azure;
        }
        .scroll{
            height: 100px;
            background-color: blueviolet;
            overflow: auto;
        }
        .scroll li{
            height: 50px;
        }
    </style>
 </head>
 <body>
    <!-- 
        修饰符特点：
            可以连续写
            EG:@click.prevent.stop(阻止默认行为+阻止冒泡)
        vue的大事件修饰符：
        1.prevent：阻止默认事件（常用） ——@click.prevent
        2.stop:阻止事件冒泡
        3.once：事件只触发一次。（常用）
        4.capture：使用事件的捕获模式
                tip:捕获模式：
                            先从外层开始捕获到点击
                            然后从里层开始冒泡
        5.sefl:只有event.target是当前操作的元素时才触发事件——也可用作防止事件冒泡
        6.passive：事件的默认行为立即执行，无须等待时间回调执行完毕。
        
        额外的知识：
        1.scroll为滚动条滚动事件，滚动条抵达边缘后不再出发
        2.wheel为鼠标滚轮滚动事件，滚动条抵达边缘后依旧触发

     -->
    <div id="root">
        <!-- 阻止默认事件 -->
        <a href="https://www.baidu.com" @click.prevent="showInfo">点我提示信息</a>
        <!-- 阻止事件冒泡 -->
        <div style="background-color: blanchedalmond;"@click="showInfo">
            <button @click.stop="showInfo2">点我提示信息</button>
            <!-- 修饰符可以连续写 -->
            <a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>

        </div>

        <!-- 事件只触发一次 -->
        <button @click.once="showInfo2">点我提示信息</button>
        <!-- 事件的捕获模式  -->
        <!--   捕获模式：
                        先从外层开始捕获到点击
                        然后从里层开始冒泡 
                            这里体现为 box1先捕获到事件，然后到button，但
                        冒泡是由button ——→  div 
                        冒泡的结果时，div中触发的点击时间event.target也是button     
                    -->
        <div @click.capture="click(1)" class="box1">
            <button @click="click(2)">事件的捕获模式</button>
        </div>
        <div @click.self="self($event)" class="box2">
            <button @click="self($event)">事件修饰符self</button>
        </div>
        <!-- 6.passive：事件的默认行为立即执行，无须等待时间回调执行完毕。 -->
        <!-- 事件执行的流程为：一执行回调函数，并且等待执行完成后 →二、渲染效果，
            在这个案例中，scroll函数内事件执行时间过长，会影响滚动条的渲染 ，
            这里使用passive不等待回调函数执行完成，直接渲染-->
        <ul class="scroll" @wheel="scroll">
            <!-- wheel 为滚轮滚动事件
            scroll 为滑动条滚动事件 -->
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    
   <script>
   new Vue({
   el:'#root',
   data:{
    name:'helloworld'
    },
        methods:{
            showInfo(e){
                alert("欢迎你");
                //这里弹出窗口后会默认执行href
            },
            showInfo2(e){
                alert("同学你好");
            },
            self(event){
                console.log(event.target);
            },
            click(number){
                console.log(number);
            },
            scroll(){
                for(let i=0;i<100;i++){
                    console.log("f");
                }
            }
   }
   })
   </script>
 </body>

jhfutureWeb Developer & Designer

一个记录技术分享的网站。