Vue学习之事件修饰符

- 日理万妓 2021-12-03 05:37 400阅读 0赞

# Vue事件修饰符 #

## 事件修饰符概览 ##

修饰符      | 说明                        
     -------- | -------------------------- 
     .stop    | 阻止冒泡                      
     .prevent | 阻止默认事件                    
     .capture | 添加事件侦听器时使用事件捕获模式          
     .self    | 只当事件在该元素本身(比如不是子元素)触发时触发回调
     .once    | 事件只触发一次

## 事件修饰符具体介绍 ##

### .stop ###

.stop用来防止冒泡，我们先来看看冒泡的场景

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="./lib/vue-2.4.0.js"></script>
        <style>
                .inner {
                  height: 150px;
                  background-color: gold;
                }
            
                .outer {
                  padding: 40px;
                  background-color: red;
                }
              </style>
    </head>
    <body>
        
        <div id="app">
                <div class="inner" @click="div1Handler">
                        <input type="button" value="点击" @click="btnHandler">
                </div>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data: {
    
                },
                methods: {
                    div1Handler() {
                        console.log('这是触发了 inner div 的点击事件')
                    },
                    btnHandler() {
                        console.log('这是触发了 btn 按钮 的点击事件')
                    }
                }
            })
        </script>
    </body>
    </html>

页面操作效果

![在这里插入图片描述][20190706172800463.gif]

我们看到不光点击按钮的点击事件触发了，而且父容器div的点击事件也触发了，这时我们就可以使用.stop来阻止这个冒泡了，如下

![在这里插入图片描述][20190706173024316.gif]

在访问测试

![在这里插入图片描述][2019070617334837.gif]

通过输出可以看到点击事件没有往上冒泡了！

### .prevent ###

阻止默认行为,我们可以通过a标签来演示，先看未阻止的情况

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

看下演示效果  
![在这里插入图片描述][20190706174115402.gif]

我们可以看到先触发了我们的弹出框，然后页面跳转了，这时我们可以阻止默认行为

![在这里插入图片描述][20190706174254218.gif]

再看效果

![在这里插入图片描述][201907061744136.gif]

从效果中可以看出默认的跳转事件被阻止了！

### .capture ###

实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。  
就是谁有该事件修饰符，就先触发谁。 先看没有该修饰符的操作

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][20190706180111765.gif]

输出我们可以看到先触发的 按钮的点击事件，然后触发的div的点击事件，现在我们绑定 .capture

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][20190706180253589.gif]

通过输出可以看到是先触发的 绑定的有".capture"的div，然后触发的btn按钮。

### .self ###

实现只有点击当前元素时候，才会触发事件处理函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

效果演示:

![在这里插入图片描述][20190706180530147.gif]

### .once ###

只触发一次事件处理函数

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][20190706180833162.gif]

通过输出效果可以看出阻止默认行为只有效了一次！

### .stop 和 .self 的区别 ###

先看.stop的行为:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]

点击btn按钮，阻止冒泡，我们看效果

![在这里插入图片描述][20190706181513551.gif]

通过演示可以看到点击按钮，两个div的事件都没有触发。

再看.self

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][201907061816589.gif]

通过演示可以看出self只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为。

[20190706172800463.gif]: /images/20211203/a4e8f6317fce406698fa01eaa63d7d00.png
[20190706173024316.gif]: /images/20211203/552bab29f81e4397a096e2e3ebc76f85.png
[2019070617334837.gif]: /images/20211203/0f99d14a05a24db5b95dbff382a08513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211203/88e9cd7657b34b878fa6a3750805ec67.png
[20190706174115402.gif]: /images/20211203/cc07adc59f3d4b41b72cde5eeb8b5029.png
[20190706174254218.gif]: /images/20211203/3e5839cba60f49a0aa1b1cb1688f1160.png
[201907061744136.gif]: /images/20211203/ec0e4dd3eb2946eb8da47ff1ea78b81c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211203/d732d67114024614b486cf75820fbe33.png
[20190706180111765.gif]: /images/20211203/3d231a9cd8c7437d82a7a4d3c4e76de9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211203/db38abc65c4c49ae82611c1bf213f40f.png
[20190706180253589.gif]: /images/20211203/2b33b870e8674b2686cd41a5d45a1ab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211203/7dddccdc2c6b4dcabcf3a9c10f7b7c02.png
[20190706180530147.gif]: /images/20211203/f60cbd80db1749e7b91c1b15b1ef348f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211203/d27494225d06478bb241bcfc7c645012.png
[20190706180833162.gif]: /images/20211203/7f3e58d494a64867a583257a85be47a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211203/d0bbbac0376d4bb68885ce9214bc1dcb.png
[20190706181513551.gif]: /images/20211203/ebd687a324574b7595e91c669df4c03e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211203/f5ace21e03ba4ef6bd1e4f84ef39635c.png
[201907061816589.gif]: /images/20211203/91aa9f05d86f489880e58b2eb5959341.png