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

文章目录

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


前文提要

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

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


事件修饰符

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

prevent(常用)

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

<a href="http://www.baidu.com">超链接a>

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

<a href="http://www.baidu.com" @click.prevent>超链接a>

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>

呈现效果如下:
在这里插入图片描述
当你点击div标签区域的时候会触发鼠标点击事件,从而调用函数showInfo1,控制台输出1
在这里插入图片描述
但是当你点击div标签内部的按钮时,效果则不一样。
在这里插入图片描述
控制台先输出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>

在这里插入图片描述
则不会触发事件冒泡,这是两层的情况,在内部那层书写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事件修饰符,其余两层没有。
呈现效果如下:
在这里插入图片描述
当你点击按钮的时候,呈现效果如下:
在这里插入图片描述
事件冒泡在添加了stop修饰符的这层直接被阻止,后面两层根本不会事件冒泡。

当你点击第二层的h1标签,也就是红色那层没添加stop的时候,呈现效果如下:
在这里插入图片描述
点击中间第二层没添加过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。
点击按钮,呈现效果如下:
嘴里在这里插入图片描述
最里层触发的事件,会冒泡到第二层,触发事件后,才被阻止继续冒泡。
如果点击中间的h1标签层,呈现效果如下:
在这里插入图片描述
点击中间层触发事件,事件则会直接在这层被阻止,不会继续事件冒泡,不会到第三层。

三层嵌套看出的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。
在这里插入图片描述
但是如果修改这里代码中的部分,添加once修饰符,改成下面这样

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

在这里插入图片描述
则无论如何点击这个按钮,右侧控制台永远只会输出一次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标签对应的范围:
在这里插入图片描述
只出现了1,说明只触发了div对应的回调函数,说明事件并不会从外层传到内层。
点击按钮:
在这里插入图片描述
先出现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>

点击按钮:
在这里插入图片描述
只有按钮对应的回调函数被触发了,并没有触发div标签的回调函数。
点击div标签:
在这里插入图片描述
当触发事件的是自己的时候,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修饰符,其余两层没有修饰符。
点击最内层的按钮:
在这里插入图片描述
你会发现,最内层和最外层的鼠标点击事件对应的回调函数全被触发了,说明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 href="http://www.baidu.com" @click.passive="showInfo">超链接a>

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

修饰符叠加

<a href="http://www.baidu.com" @click.prevent.stop>超链接a>

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

<a href="http://www.baidu.com" @click.stop.prevent>超链接a>

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


至此,结束。

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

你可能感兴趣的:(vue.js,学习,笔记,事件修饰符,javascript)