一.如果在内联语句中想要访问原生的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.**oncce**
点击事件只会触发一次
5.v-on:click.capture="dothis"
事件使用捕获模式,内部元素的触发事件先处理,再交由内部元素处理
事件捕获:网景公司提出的事件流,我们称之为事件捕获流,事件捕获流的思想是不太具体的
DOM结点优先接受到事件,指向性明确的DMO节点最后接收到。太抽象了,看代码:
<div>
<button>
<p>事件捕获顺序</p>
</button>
</div>
在点击事件被触发的时候,首先接受到的是<div></div>,如果此时<div></div>中有做事件处理,就会先处理,然后是<button></button>,最后才到<p></p>