文章目录
- 一、事件的基本使用
- 二、$event 对象
- 三、事件的修饰符
- 1）prevent
- 2）阻止事件冒泡
- 3）once
- 4）capture
- 5）self
- 6）passive
- 四、键盘事件(键值修饰符)
- 本人其他相关文章链接
一、事件的基本使用
注意点1：定义事件函数时，普通函数this指代vue对象，而箭头函数中this指代Window对象。
注意点2：定义事件没参数小括号()可省略，但是用在插值表达式使用一个函数返回值就必须带小括号()，比如 全名：{{fullName()}}。
注意点3：不被vue所管理的函数那么请使用箭头函数。
代码：
<button v-on:click="showInfo1">点我提示信息1(不传参)</button>
<button @click="showInfo2($event, 66)">点我提示信息2(不传参)</button>
var vm = new Vue({
el: "#app",
data: {},
methods:{
showInfo1(event) {
console.log(event);
},
showInfo2(event, number) {
console.log(event); //指代事件对象
console.log(number);
console.log(this); //箭头函数中指代Window对象，普通方法指代vue对象
}
}
})二、$event 对象
在事件处理函数中访问 DOM 原生事件 event 对象，可以使用特殊变量$event 对象传入。
三、事件的修饰符
事件修饰符举例说明：
1）prevent
默认<a>标签会跳转，想实现点击不跳转就设置@click.prevent=”事件函数”或者 <a href=
2）阻止事件冒泡
捕获阶段：指由外往内 冒泡阶段：指由内到外
举例：2个div1，div2，都有点击事件，如果不设置事件修饰符stop，那么点击div2触发事件完成之后，还会触发div1事件，而设置stop修饰符后，不会触发冒泡阶段。
3）once
事件只触发一次（常用），即无论点击多少次按钮，按钮只触发一次。
4）capture
设置使用事件的捕获模式，不设置使用冒泡模式（由内向外触发事件函数）；
使用事件的捕获模式 ：不设置.capture，先执行showMsg(2)，再执行showMsg(1)，设置之后先执行showMsg(1)，再执行showMsg(2)
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
showInfo(e){
console.log(e.target)
}5）self
只有event.target是当前操作的元素时才触发事件
举例：
div和button都设置事件函数，如果div标签不设置.self，那么点击button按钮会调用2次函数，且输出event.target为：<button>点我提示信息，如果div标签设置了.self那么只有点击div才会触发事件且输出event.target为：<div class=“demo1”><button>点我提示信息</button></div>，而只点击button只会触发button的事件且输出event.target为：<button>点我提示信息</button>。
<div class="demo1" @click.self="showInfo">
<button @click="showInfo">点我提示信息</button>
</div>6）passive
事件的默认行为立即执行，无需等待事件回调执行完毕
举例：
定一个事件会计算10W次，如果不设置.passive，那么会等事件全部结束后，滚轮才会向下移动一个位置，而设置了.passive，那么滚轮会先移动而不会去等待事件执行是否结束。
事件的默认行为立即执行，无需等待事件回调执行完毕
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
demo(){
for (let i = 0; i < 100000; i++) {
console.log('#')
}
console.log('累坏了')
}四、键盘事件(键值修饰符)
两个隐藏小知识点：
1.事件修饰符可串行，比如：@click.stop.once
2.对于键盘按键想实现按Ctrl+y才调用，则使用@keyup.ctrl.y=”showInfo”
