Vue学习日记之事件修饰符

   在实际的编程中，我们常常会实现某些常用的功能，并为此编写函数，但是在vue中，定义了一系列的事件修饰符，来让我们不需要编写额外的代码，实现特定的功能。

  事件修饰符

• 由.开头的指令后缀
• 实现某一功能
• 在html元素中使用
• 常常搭配v-on等基本指令来实现相关的功能

常见的事件修饰符有：

• .stop---------阻止事件的冒泡
• .prevent-----阻止默认行为，例如<a>的点击跳转
• .capture-----使用事件捕获机制
• .self-----------当事件在该元素本身时，触发回调
• .once---------事件只触发一次

  我们想要阻止冒泡事件。那么可以使用事件修饰符.stop

  <div id="app" @click="stop">
    <input value="点击" type="button" @click="start"/>
  </div>
<script>
  var Vm=new Vue({
      el:"#app",
      data:{},
      methods:{
          start:function () {
              console.log("input启动事件处理程序");
          },
          stop:function () {
              console.log("div启动事件处理程序");
          }
      }
  })

运行结果：

我们现在一般的浏览器执行的都是DOM事件流，事件流的发生分为三个阶段，事件捕获，目标事件，事件冒泡。

  当我们点击<input>按钮时，发生点击事件click，先发生事件捕获，但是不进行事件处理，只有当事件接触到了input这个目标节点时（此时处于第二阶段目标事件），才发生事件处理程序，此时事件冒泡启动，<input>的父级元素<div>在事件冒泡中接触到了这个点击事件，自己也触发了此事件。所以会先执行目标事件函数"input启动事件处理程序"，然后父级元素div也接触到了点击事件于是执行父级事件函数"div启动事件处理程序"。

 

接下来我们使用事件修饰符.stop来阻止事件的冒泡

  <div id="app" @click="stop">
    <!--我们在input上使用.stop来阻止冒泡-->
    <input value="点击" type="button" @click.stop="start"/>   
  </div>
<script>
  var Vm=new Vue({
      el:"#app",
      data:{},
      methods:{
          start:function () {
              console.log("input启动事件处理程序");
          },
          stop:function () {
              console.log("div启动事件处理程序");
          }
      }
  })
</script>

运行结果：

我们在input上使用.stop来阻止事件的冒泡，当事件在接触到目标节点<input>后停止冒泡，可见.stop能够阻止事件发生冒泡。

 

接下来，我们使用.prevent，此事件修饰符能够阻止html元素的默认行为，我们以<a>元素为例

<a id="app" href="http://www.baidu.con" @click.prevent="link">点我跳转</a>
<script>
  var Vm=new Vue({
      el:"#app",
      data:{},
      methods:{
          start:function () {
              console.log("input启动事件处理程序");
          },
          stop:function () {
              console.log("div启动事件处理程序");
          },
          link:function () {
            console.log("没有发生跳转");
          }
      }
  })
</script>

运行结果：

我们会发现点击之后，没有跳转，.prevent能够阻止事件的默认行为发生。

 

接下来，我们看看.capture事件修饰符的作用

<！--使用了事件捕获-->
<div id="app" @click.capture="stop">
    <input value="点击" type="button" @click="start">
</div>
<script>
  var Vm=new Vue({
      el:"#app",
      data:{},
      methods:{
          start:function () {
              console.log("input启动事件处理程序");
          },
          stop:function () {
              console.log("div启动事件处理程序");
          },
          link:function () {
            console.log("没有发生跳转");
          }
      }
  })

运行结果：

默认的事件流是DOM事件流，先捕获，再冒泡，我们在<div>节点上使用了.capture，运行结果为div事件处理程序先触发，随后再触发input事件处理程序，外层的非目标节点先进行事件处理，然后到目标节点进行事件处理，这里很明显是使用了事件捕获的事件流。

 

接下来，我们看看事件修饰符.self的效果。

<div id="app" @click.self="stop">
    <!--这里我们对div的点击事件使用了事件修饰符.self，在我们点击div时才会触发，不点击div时不会触发，事件冒泡被动也不能触发-->
    <input value="点击" type="button" @click="start">
</div>
<script>
  var Vm=new Vue({
      el:"#app",
      data:{},
      methods:{
          start:function () {
              console.log("input启动事件处理程序");
          },
          stop:function () {
              console.log("div启动事件处理程序");
          },
          link:function () {
            console.log("没有发生跳转");
          }
      }
  })
</script>

运行截图：

当我们点击input时

当我们点击div时

.self是事件监听器发生在目标元素时，才启动事件处理程序，事件的冒泡机制都无法启动事件处理程序。

 

接下来是，只触发一次的.once事件修饰符

<div id="app" @click.self.once="stop">
  <!--注意这里有两个事件修饰符-->
    <input value="点击" type="button" @click="start">
</div>
<script>
  var Vm=new Vue({
      el:"#app",
      data:{},
      methods:{
          start:function () {
              console.log("input启动事件处理程序");
          },
          stop:function () {
              console.log("div启动事件处理程序");
          },
          link:function () {
            console.log("没有发生跳转");
          }
      }
  })
</script>

运行结果：

点击一次

点击多次

无反应

.once事件修饰符的作用是事件处理程序只发生一次，事件修饰符可以串联的，而且顺序也相当的重要，例如@click.prevent.self会取消所有的点击，@click.self.prevent会阻止对自身的点击。