vue事件修饰符号

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

1.html代码

   

        Submit

   

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.**oncce**   

        点击事件只会触发一次

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

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

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

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

       

           

               

事件捕获顺序

           

       

        在点击事件被触发的时候，首先接受到的是

,如果此时

中有做事件处理，就会先处理,然后是,最后才到