vue事件修饰符号

一.如果在内联语句中想要访问原生的DOM事件，可以使用特殊变量$event将其传入方法之中。

    1.html代码  

<button v-on:click="warn('form can not be submitted yet.',$event)">        Submit</button>

 

    2.js代码

​​​​​​​

methods:{      warn:function(message,event){      if(event)event.preventDefault()      alert(message)        }}

 

二.事件修饰符

    1.v-on:click.stop="doThis"    

        作用：阻止点击事件继续传播,阻止事件冒泡

        冒泡：当事情发生之后，因为事件源本身并没有处理事件的能力(处理事件的函数为绑定在事件源)，所以事件从外向里或者从里向外开始传播，直到到达了能够处理这个事件的代码之中。

        防止冒泡事件的写法就是，在点击事件上加上.stop,这样子节点就不会捕获到父节点的触发事件。相当于event.preventDefault()

        

    2.v-on:submit.prevent="onSubmit"   

        取消事件的预设行为，却不阻止事件的进一步传播，类似于event.preventDefault()

        例子：form表单的提交  网页的超链接等等

        

    3.v-on:click.self="dothis"    

        只有当event.target是当前元素自身才触发的函数只触发自己范围内的事件，不包含子元素

        

    4.v-on:click.once     

        点击事件只会触发一次

 

    5.v-on:click.capture="dothis"

        事件使用捕获模式，内部元素的触发事件先处理，再交由内部元素处理

        事件捕获：网景公司提出的事件流，我们称之为事件捕获流，事件捕获流的思想是不太具体的

        DOM节点优先接受到事件，指向性明确的DMO节点最后接收到。太抽象了，看代码：

  

<div>    <button>        <p>事件捕获顺序</p>    </button></div>

        在点击事件被触发的时候，首先接受到的是<div></div>,如果此时<div></div>中有做事件处理，就会先处理,然后是<button></button>,最后才到<p></P>