目录
(1)v-on 的基本使用
v-on:click="fun1"
的形式来绑定事件 ,相当于原生 js
中的
onclick 。
v:bind-->: ,v-on-->@
(2)事件修饰符的使用
a.stop
<div style="width:200px;height:200px;background-color:red" @click="fun1">
<div style="width:100px;height:100px;background-color:blue" @click.stop="fun2">
</div>
</div>
使用
.stop
来对事件的冒泡机制进行阻止
js
中的事件的冒泡指的是,在触发了内层元素的同时,也会随之
继续触发外层元素(外层元素包裹了内层元素),在做点击的过程中,
点击了内层元素,也可以认为是同时点击了外层元素。所以两个事件
都会触发。
在实际项目开发中,几乎没有太多需求会使用到这种事件冒泡的
机制,所以我们需要阻止事件的冒泡。
阻止事件冒泡之后的效果是,
在我们点击了内层元素之后,内层元素绑定的事件触发,触发完毕后,
由于事件冒泡被阻止,就不会继续触发外层元素的事件了
。
b.prevent
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击1</a>
<a href="http://www.baidu.com" @click.prevent="fun1">点击2</a>
</div>
使用
.prevent 来阻止超链接默认的行为
所谓默认的行为指的是超链接中的
href
属性链接
在实际项目开发中,不仅仅只是按钮需要我们绑定事件来控制行
为,超链接的使用我们也是要遵循这种自己绑定事件触发行为的方式。
所以在
a
标签中的
href
链接往往要被我们以特殊的方式处理掉。
c.capture capture:捕获;
<div style="width:200px;height:200px;background-color:red" @click.capture="fun1">
<div style="width:100px;height:100px;background-color:blue" @click="fun2">
</div>
</div>
使用.capture 实现捕获触发事件的机制
使用的是外层
div
套用内存
div
的例子(其中内层
div
没有选择阻
止冒泡),在此基础之上,点击内层的
div
,先触发内层
div
的事件,
再触发外层
div
的事件。
加入了.capture 修饰符之后
,先触发的是外层的
div
事件,后触发
的是内层
div
事件。
被.capture 修改之后,事件优先触发
。
d.self
<div id="app">
<div style="width:200px;height:200px;background-color:red" @click="fun1">
<div style="width:100px;height:100px;background-color:blue" @click.self="fun2">
<input type="button" value="点击" @click="fun3"/>
</div>
</div>
</div>
self
实现
阻止事件冒泡行为的机制
(之前我们讲过了一个
.stop
)
使用
.self
实现的是阻止自身冒泡的行为(它不会真正的阻止冒泡)
案例:外层
div
,内层
div
,在内层
div
中加入了
button
测试
1
:
在内层 div 加入.stop 修改符
观察实验结果,点击最内层的按钮,触发按钮事件,触发了内层
的
div
,外层
div
没有触发,也就是说,使用
.stop 修改符,不会阻止
掉自身事件的触发,在自身事件触发完毕之后,阻止事件继续向外扩
散
。
测试:
在内层 div 加入.self 修改符
观察实验结果,点击按钮,触发按钮事件,没有触发内层
div
事
件,跨过了内层
div
事件的触发后,继续触发了外层
div
的事件。
表示使用
.self 只是将当前元素(测试中的内层 div)的冒泡行为阻
止掉了,但是不会影响冒泡行为继续向外扩散
(测试中的外层
div
继
续触发了)。
e.once
<div id="app">
<a href="http://www.baidu.com" @click="fun1">点击1</a>
<a href="http://www.baidu.com" @click.prevent.once="fun1">点击2</a>
</div>
使用
.once
修饰符,只触发一次事件处理函数
.once
需要结合
.prevent
来使用
在我们使用事件修饰符的时候,有可能会存在这样的需求,需要
同时为
@click
事件使用多个修饰符。例如我们现在就需要同时使
用
.once
和
.prevent
修饰符。在使用的时候,通过绑定事件的
@click
连续的绑定修饰符就可以了。
语法:
@click.prevent.once
测试:通过超链接的触发来观察
在只使用
@click
的时候(没有做任何修饰符的修饰),点击超链接,
先触发
@click
,后触发
href
链接。
当为
@click
添加上
@click.prevent.once
之后,点击超链接。
第一次点击:只触发了
@click
的事件,
href
链接没有触发
第二次点击(已经点击过一次之后再次点击):没有触发
@click
,只触
发了
href
。