Vue之事件修饰符

Posted on | Edited on | In , | Views:

这些时间自学 Vue 框架，遇到了其事件修饰，感觉挺有意思的，索性写一下它们的区别和联系。

Vue提供了很多事件修饰符来辅助实现一些功能。

常见的事件修饰符有如下：

  • .stop 阻止冒泡。本质是调用 event.stopPropagation()。
  • .prevent 阻止默认事件（默认行为）。本质是调用 event.preventDefault()。
  • .capture 添加事件监听器时，使用捕获的方式（也就是说，事件采用捕获的方式，而不是采用冒泡的方式）。
  • .self 只有当事件在该元素本身（比如不是子元素）触发时，才会触发回调。
  • .once 事件只触发一次。

注意：一个事件，允许同时使用多个事件修饰符。

这里，稍微扯一下冒泡和捕获的概念的区别。

首先，假设有这样一个场景，有一个父div容器包含了一个子div容器。

如果我们对父div容器设定了点击触发事件，同时对子div也设定了一个点击触发事件。

这时，我们由于包含关系，在默认情况下，点击子div会随之触发父div点击事件，这样的情况由于是向上一级

触发的，类似于向上冒泡的行为，所以我们称之为“冒泡”。

相反的，如果点击触发父容器事件而引发了子容器事件的触发，这种向下一级的触发的，则称之为“捕获”。

而.stop就可以实现阻止冒泡自行为的继续下去，.self也可实现该功能，但是有一个限制，就是只能在被此修饰符修饰的标签自身阻止自身被冒泡，只有点击他本身时才去执行此操作，点击他的其他关联元素不去执行此操作，也就是说，只有点击他本身才可以。而.stop是从修饰的标签所在的内外结构中，由最内层开始冒泡到，如果是。

而相反的，.capture则是从修饰的标签所在的内外结构中，由最外层开始阻止向下一级触发事件。

下面来举几个例子：

(1).stop （阻止事件继续传播 即阻止它的捕获和冒泡过程）
实例：如下点击内部点击，阻止了冒泡过程，即只执行tz这个方法，如果不加.stop，讲先执行方法，后执行gett方法。即通过了冒泡这个过程。

1
2
3
<div v-on:click="gett">外部点击
    <div  v-on:click.stop="tz">内部点击</div>
</div>

（2）.prevent （阻止默认事件发生 即event.preventdefault(): ）
实例： 阻止了a标签的默认刷新，点击超链接将不会实现跳转。 

1
<a href="www.baidu.com" v-on:click.prevent>点击</a>

（3）.capture （添加事件监听器时使用事件捕获模式，即在捕获模式下触发）
实例：在点击最里层的点击6时，gett方法先执行，因为gett方法在捕获模式执行的，先与冒泡事件。下列执行顺序 geet->set->tz ,因为后俩个还是冒泡模式下触发的事件。

1
2
3
4
5
<div v-on:click.capture="gett">外部点击5
    <div  v-on:click="tz">内部点击5
        <div  v-on:click="set">点击6</div>
    </div>
</div>

（4）.self （当前元素自身时触发处理函数时才会触发函数，原理：是根据event.target确定是否当前元素本身，来决定是否触发的事件/函数 ）
实例：如果点击内部点击2，冒泡不会执行gett方法，因为event.target指的是内部点击2的dom元素，不是外部点击1的，所以不会触发自己的点击事件。

1
2
3
<div v-on:click.self="gett">外部点击1
	<div v-on:click="tz">内部点击2</div>
</div>

（5）.once （只触发一次）
实例：

1
<div v-on:click.once="tz">once</div>

全部代码

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
<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <div id="app">
        <button v-on:click="gett" >点击</button>
        <input type="text" v-on:keyup.13="gett" />
        <div v-on:click="gett">外部点击
            <div  v-on:click.stop="tz">内部点击</div>
        </div>
        <a href="" v-on:click.prevent>dsfs</a>
        <div v-on:click.self="gett">外部点击1
            <div  v-on:click="tz">内部点击2</div>
        </div>
        <div v-on:click.capture="gett">外部点击5
            <div  v-on:click="tz">内部点击5
                <div  v-on:click="set">点击6</div>
            </div>
        </div>
        <div  v-on:click.once="tz">once</div>
        </div>

        <div id='a'>外部点击3
            <div  id='b'>内部点击4</div>
        </div>

        <script src="js/mui.min.js"></script>
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            mui.init()
        </script>
        <script type="application/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    name:'张三'
                },
                methods:{
                    gett:function(e){
                        alert("111");
                        console.log(e.target);
                        this.name='李四';

                    },
                    tz:function(e){
                        console.log(e.target);
                        alert(222)
                    },
                    set:function(e){
                        console.log(e.target);
                        alert(333)
                    }
                }
            })
            document.getElementById('a').addEventListener('click',function(e){
                console.log(e.target);
                alert('aaaa')
            },true)
            document.getElementById('b').addEventListener('click',function(e){
                console.log(e.target);
                alert('bbbb')
            },true)
        </script>
    </body>

</html>
不要投钱给我
0%