Vue教程03(事件修饰符)

落日映苍穹つ 2021-12-17 00:15 321阅读 0赞

本文我们来详细介绍下vue中的事件修饰符

# Vue事件修饰符 #

## 事件修饰符概览 ##

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.stop</td> 
   <td align="left">阻止冒泡</td> 
  </tr> 
  <tr> 
   <td>.prevent</td> 
   <td align="left">阻止默认事件</td> 
  </tr> 
  <tr> 
   <td>.capture</td> 
   <td align="left">添加事件侦听器时使用事件捕获模式</td> 
  </tr> 
  <tr> 
   <td>.self</td> 
   <td align="left">只当事件在该元素本身(比如不是子元素)触发时触发回调</td> 
  </tr> 
  <tr> 
   <td>.once</td> 
   <td align="left">事件只触发一次</td> 
  </tr> 
 </tbody> 
</table>

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

### .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/20211214/954165b06bd5466daf2a57313e64ca5c.png
[20190706173024316.gif]: /images/20211214/59b43668c22a4357b879ed6c01a53276.png
[2019070617334837.gif]: /images/20211214/58c49d0e060446a2bc3f5cc1cd706a93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211214/6c804e574cfc444388bbb64fe7863723.png
[20190706174115402.gif]: /images/20211214/47493bc26e864c27824d0e42436f1e28.png
[20190706174254218.gif]: /images/20211214/0a24e7bf939b4206bac80541ac93a3d5.png
[201907061744136.gif]: /images/20211214/9527aac366ad4e7898e31c5521cfc03f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211214/aad53ff1eabf4c29a0c98a42d743ab76.png
[20190706180111765.gif]: /images/20211214/5c13527f93314ca1bc60ca6cf5f8cf57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211214/62b9c59409104ebbaedf24d98ce2ec8c.png
[20190706180253589.gif]: /images/20211214/95d88d3f2b0c4143bfe78413df4535fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211214/16c43aa1d82a44bbb1bf8804d7b406be.png
[20190706180530147.gif]: /images/20211214/fefd4dd2afaf42249721ec2110a4e838.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211214/877309197165436a8bb19da2efda728b.png
[20190706180833162.gif]: /images/20211214/b18bb42248fb422386a2314702c6f0d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 5]: /images/20211214/9f7420b025644e809eb2a3cc70ab5c21.png
[20190706181513551.gif]: /images/20211214/632f4df5a8014cc5ab46e8d4e1541b9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 6]: /images/20211214/3b31da5b576a4eecabe555670413cc00.png
[201907061816589.gif]: /images/20211214/32683b4b2eb24e8e8b301b8fe59ca033.png