Vue框架学习笔记——事件修饰符

叁歲伎倆 2024-02-17 10:24 47阅读 0赞

#### 文章目录 ####

*  前文提要
 *  事件修饰符
 *  prevent（常用）
 *  stop（不常用）
 *   *  事件冒泡
     *  stop使用方法
     *  三层嵌套下的stop
     *  三层嵌套看出的stop：
 *  once（常用）
 *  capture（不常用）
 *  self（不常用）
 *   *  思考点，事件是否被阻止传播
 *  passive（不常用）
 *  修饰符叠加

--------------------

## 前文提要 ##

本人仅做个人学习记录，如有错误，请多包涵

参考链接：[面试官：Vue常用的修饰符有哪些有什么应用场景][Vue]

--------------------

## 事件修饰符 ##

在前文提到了“事件处理”后，我们可以为标签绑定事件，事件也存在着六种修饰符，称为事件修饰符。  
它们分别是：prevent、stop、once、capture、self、passive，这些标签具有不同的功能，可以为事件 叠加事件修饰符使用。  
前三个常用，后三个了解就好。

## prevent（常用） ##

**prevent可以阻止标签的默认行为**，例如

当你点击上面代码呈现的超链接的时候，回跳转到百度的首页。  
但是当你为这个绑定鼠标点击事件并且添加prevent修饰符的时候（回调函数不一定要添加），则会阻止这个默认行为。也就是，**点击过后什么都不会发生**，**如果添加了回调函数，则响应回调函数，但仍然不会跳转**。

## stop（不常用） ##

### 事件冒泡 ###

stop修饰符用来阻止事件冒泡，**事件冒泡是从内向外的**。  
当一个标签被另一个标签包含的时候，二者都有着相同的触发事件，例如鼠标点击，当你触发内部的标签的时候，也会触发外部标签的事件，从而触发多遍。

Vue存在两个阶段，捕获阶段和冒泡阶段，先捕获阶段，从外向内，事件传递；后冒泡阶段，从内向外。  
默认在冒泡阶段处理事件，从而判断是否触发事件，触发回调函数，所以  
**回调函数的触发顺序默认也是由内向外的**。

样例代码：

在这里插入代码片<body>
      <div id="box" @click="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <button @click="showInfo2" style="background-color:rgb(0, 255, 13)">
          点我触发事件
        </button>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo1() {
          
              console.log(1)
            },
            showInfo2() {
          
              console.log(2)
            }
          }
        })
      </script>
    </body>

呈现效果如下：  
![在这里插入图片描述][4d0ef8d17bf644d5b33e1bd5295440d5.png]  
当你点击div标签区域的时候会触发鼠标点击事件，从而调用函数showInfo1，控制台输出1  
![在这里插入图片描述][3f0a3c594cb2496b832004e46c5484b1.png]  
但是当你点击div标签内部的按钮时，效果则不一样。  
![在这里插入图片描述][8b8b94eca6e24916ba52c5132c99ba9d.png]  
控制台先输出2，后输出1。  
可以看出，内部按钮先触发事件，外部的div标签后触发事件，这就是**事件冒泡，你可以想象一个气泡从下部跑到上部，就是事件从内部到外部传递，回调函数从内向外顺序触发。**。

### stop使用方法 ###

修改代码，改成下述样式（其余不变）

<div id="box" @click="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <button @click.stop="showInfo2" style="background-color:rgb(0, 255, 13)">
          点我触发事件
        </button>
      </div>

![在这里插入图片描述][de0e9c5f87bc49cca5a63b905dcc0790.png]  
则不会触发事件冒泡，这是两层的情况，在内部那层书写stop，从而阻止事件冒泡。

### 三层嵌套下的stop ###

<body>
      <div id="box" @click="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <h1 @click="showInfo2" style="background-color:rgb(255, 0, 0)">
          <button @click.stop="showInfo3" style="background-color:rgb(0, 255, 13)">
            点我触发事件
          </button>
        </h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo1() {
          
              console.log(1)
            },
            showInfo2() {
          
              console.log(2)
            },
            showInfo3() {
          
              console.log(3)
            }
          }
        })
      </script>
    </body>

三层中，最里面的标签中加入了stop事件修饰符，其余两层没有。  
呈现效果如下：  
![在这里插入图片描述][1b25d60e122d4084996789054877a4a4.png]  
当你点击按钮的时候，呈现效果如下：  
![在这里插入图片描述][3bdaff9ced5b4555a2f783de28a744eb.png]  
事件冒泡在添加了stop修饰符的这层直接被阻止，后面两层根本不会事件冒泡。

当你点击第二层的h1标签，也就是红色那层没添加stop的时候，呈现效果如下：  
![在这里插入图片描述][a73684e538324888a5a5cbaf900314ea.png]  
点击中间第二层没添加过stop修饰符，后面两层仍然可以触发事件冒泡，最里面那层的stop修饰符，并不能管到整个嵌套的结构。

再次修改代码（其余部分不变）：

<div id="box" @click="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <h1 @click.stop="showInfo2" style="background-color:rgb(255, 0, 0)">
          <button @click="showInfo3" style="background-color:rgb(0, 255, 13)">
            点我触发事件
          </button>
        </h1>
      </div>

三层嵌套中，只在中间的第二层添加stop事件修饰符，最里层和最外层不添加stop。  
点击按钮，呈现效果如下：  
嘴里![在这里插入图片描述][e8004e74247f45f3b9fa96c843933bde.png]  
最里层触发的事件，会冒泡到第二层，触发事件后，才被阻止继续冒泡。  
如果点击中间的h1标签层，呈现效果如下：  
![在这里插入图片描述][0b9191dc1b834fefa8d0b8f21c6fffde.png]  
点击中间层触发事件，事件则会直接在这层被阻止，不会继续事件冒泡，不会到第三层。

### 三层嵌套看出的stop： ###

stop修饰符，仅能阻止事件在当前标签触发后，不会继续冒泡传播。  
不会管前一层触发的事件如何传播，也不会管触发在这层之外的嵌套层触发的事件会不会接着冒泡。

## once（常用） ##

once能够让事件仅能够触发一次。  
如果代码写成这样：

<body>
      <div id="box">
          <button @click="showInfo">
            点我触发事件
          </button>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo() {
          
              console.log(1)
            }
          }
        })
      </script>
    </body>

那么可以点击按钮多次，从而多次触发鼠标点击事件，在控制台输出多个1。  
![在这里插入图片描述][73f7c0df0de5467986800882670566a3.png]  
但是如果修改这里代码中的部分，添加once修饰符，改成下面这样

<button @click.once="showInfo">点我触发事件</button>

![在这里插入图片描述][1c4f70e1e51846f89e655d7a7d0d6377.png]  
则无论如何点击这个按钮，右侧控制台永远只会输出一次1，这意味着事件永远只会被触发一次

## capture（不常用） ##

前文提到过事件在冒泡阶段处理，因此回调函数是从内向外触发的，那么capture则是让事件在捕捉模式处理，回调函数从外向内触发。  
当你的代码写成下面这样：

点击外层的div标签的时候，呈现效果如下：

<body>
      <div id="box" @click.capture="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <button @click.capture="showInfo2" style="background-color:rgb(0, 255, 13)">
          点我触发事件
        </button>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo1() {
          
              console.log(1)
            },
            showInfo2() {
          
              console.log(2)
            }
          }
        })
      </script>
    </body>

点击div标签对应的范围：  
![在这里插入图片描述][745e991724fc40c0a31384198e41f689.png]  
只出现了1，说明只触发了div对应的回调函数，说明事件并不会从外层传到内层。  
点击按钮：  
![在这里插入图片描述][e09cb3c623814ea2bf3abb743cca186b.png]  
先出现1，后出现2，有两个数，事件触发两次，回调函数从外向内被调用。

## self（不常用） ##

self会要求事件触发者是自己的时候，才允许回调函数的执行，也可以用来阻止事件冒泡（阻止得不完全）。  
代码写成这样（其余保持不变）：

<div id="box" @click.self="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <button @click="showInfo2" style="background-color:rgb(0, 255, 13)">
          点我触发事件
        </button>
    </div>

点击按钮：  
![在这里插入图片描述][934fecaad2264b3c8db5589c9aae4133.png]  
只有按钮对应的回调函数被触发了，并没有触发div标签的回调函数。  
点击div标签：  
![在这里插入图片描述][a2998abd5f65411f8d28f07f2b3b25c9.png]  
当触发事件的是自己的时候，div标签对应的回调函数才能被执行。

`event.target`在传递的过程中是不变的，因此可以使用这个查看事件的触发者

### 思考点，事件是否被阻止传播 ###

在stop修饰符中，如果三层的标签中间有一个stop，最内层的事件，传递到中间这层，触发事件之后，就无法继续传播了，那么，self是吗？  
修改代码如下：

<body>
      <div id="box" @click="showInfo1" style="background-color:rgb(208, 255, 0);height:50px">
        <h1 @click.self="showInfo2" style="background-color:rgb(255, 0, 0)">
          <button @click="showInfo3" style="background-color:rgb(0, 255, 13)">
            点我触发事件
          </button>
        </h1>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo1() {
          
              console.log(1)
            },
            showInfo2() {
          
              console.log(2)
            },
            showInfo3() {
          
              console.log(3)
            }
          }
        })
      </script>
    </body>

在中间层添加self修饰符，其余两层没有修饰符。  
点击最内层的按钮：  
![在这里插入图片描述][424b2339694f441dab8d9bee81febde0.png]  
你会发现，最内层和最外层的鼠标点击事件对应的回调函数全被触发了，说明self修饰符并不会阻止事件的传播，它只会阻止回调函数的调用（因为鼠标点击事件的触发者是内部的按钮，并不是带有self修饰符的h1标签）

## passive（不常用） ##

passive会使标签的默认行为立即执行，默认行为一般会在触发事件的回调函数处理完之后执行，如果回调函数需要处理很久很久，默认行为则会因此延迟，造成使用上的不便。

<body>
      <div id="box" >
        <a href="http://www.baidu.com" @click="showInfo">超链接</a>
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo() {
          
              for (var i = 0; i < 10000; i++){
          console.log(1)}
            }
          }
        })
      </script>
    </body>

我使用的chrome浏览器，会在计数到四千的时候再跳转到百度的官网，具备一定的延迟，数值越大的时候，延迟越明显。  
如果为超链接中增加passive修饰符，如下（其余不变）：

则会在你点击超链接的时候，马上跳转到百度的官网地址。

## 修饰符叠加 ##

这样a标签既不会跳转，也会阻止事件冒泡，如果代码写成这样：

也是可以的，二者是等价的。

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[Vue]: https://vue3js.cn/interview/vue/modifier.html#%E4%BA%8C%E3%80%81%E4%BF%AE%E9%A5%B0%E7%AC%A6%E7%9A%84%E4%BD%9C%E7%94%A8
[4d0ef8d17bf644d5b33e1bd5295440d5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/dc9875ae11e24bd19889186d4206260d.png
[3f0a3c594cb2496b832004e46c5484b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/10accad8227a41b0b4c5ea055cec6538.png
[8b8b94eca6e24916ba52c5132c99ba9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/91d7a9d2968346a092116f7ced51f7b5.png
[de0e9c5f87bc49cca5a63b905dcc0790.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/81b5710a9f7a4baea156bb5fc426d4b7.png
[1b25d60e122d4084996789054877a4a4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a39ad555094441a29e1a73179705f969.png
[3bdaff9ced5b4555a2f783de28a744eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/45e23ddd8b7541af85801a79b226f28d.png
[a73684e538324888a5a5cbaf900314ea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/cb2e7508342441768d9156dabd45fd20.png
[e8004e74247f45f3b9fa96c843933bde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/1b628c645770465aa7ded3d9d17d5a43.png
[0b9191dc1b834fefa8d0b8f21c6fffde.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/956591d2d5d44667a6d0c734ba780ce2.png
[73f7c0df0de5467986800882670566a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/423250fe437a48828e50e013a5acb463.png
[1c4f70e1e51846f89e655d7a7d0d6377.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/97e348fd74df4127b4991e1d509d49a7.png
[745e991724fc40c0a31384198e41f689.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/7dea2eb258f7491dad34bd29c11d5a2b.png
[e09cb3c623814ea2bf3abb743cca186b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/8e38c11c70384d96a154e8da4a1a541f.png
[934fecaad2264b3c8db5589c9aae4133.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/db6b39b5706b4ea99c6cc57837c7fccd.png
[a2998abd5f65411f8d28f07f2b3b25c9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/fd5e855b17c949e885a5aa6892c66b5e.png
[424b2339694f441dab8d9bee81febde0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d9e885661df149089768b4839e08648a.png