vue系列：事件修饰符、按键修饰符与系统修饰符
vue系列：事件修饰符、按键修饰符与系统修饰符
好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习
文章目录
- vue系列：事件修饰符、按键修饰符与系统修饰符
- 一、什么是DOM事件流？
-
- 1、事件
- 2、事件处理程序（事件监听）
- 3、DOM 事件流
- 4、事件捕获（event capture）:
- 5、事件冒泡（event bubbing）
- 二、事件修饰符
-
- 1、内置事件对象$event
- 2、原生JS方法阻止事件冒泡
- 2、stop 阻止事件冒泡事件修饰符
- 3、prevent阻止默认事件修饰符
- 4、capture：添加事件监听器时使用事件捕获模式
- 5、.self、.once 修饰符
- 三、按键修饰符
-
- 1、按键所对应的 keyCode
- 2、自定义按键修饰符
- 四、系统修饰符
-
- 1、键盘按键修饰符
- 2、鼠标按钮修饰符
- 总结
一、什么是DOM事件流？
1、事件
用户设定或者是浏览器自身执行的某种动作。例如
click(点击)、load(加载)、mouseover(鼠标悬停)、change(改变)等等。
2、事件处理程序（事件监听）
为了实现某个事件的功能而构建的函数方法，也可称为事件监听器
3、DOM 事件流
描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。在 DOM 事件流中存在着三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
（1）事件捕获阶段：从文档的根节点流向目标对象
（2）处于目标阶段：在目标对象上被触发
（3）事件冒泡阶段：回溯到文档的根节点
4、事件捕获（event capture）:
当鼠标点击或者触发 DOM 事件时，浏览器会从根节点开始由外到内进行事件传播
5、事件冒泡（event bubbing）
当鼠标点击或者触发 DOM 事件时，浏览器会从触发事件的节点开始由内到外进行事件传播，即点击了子元素，则先触发子元素绑定的事件，逐步扩散到父元素绑定的事件。
二、事件修饰符
1、内置事件对象$event
$event 对象包含事件的相关信息：比如事件源 target、事件类型 type、偏移量 offsetX 等。
代码示例如下：
<body>
<div id="app">
<button @click="print($event)">单击我button>
div>
<script>
var vm = new Vue({
el: "#app",
data: {//存储数据地方
flag: true
},
methods: {
print(e) {
console.log(this)//this 表示 vue 实例
console.log(e)//打印出 event 对象
//e.target.innerHTML可以打印出按钮上的文本
console.log(e.target.innerHTML)//e.target 就是拿到的那个按钮，这个地方拿到的是原生 dom 对象
}
}
})
script>
body>
2、原生JS方法阻止事件冒泡
在单击的方法中传入$event 事件对象，然后方法内部调用事件对象的 stopPropagation()方法。
代码示例如下：
<body>
<div>
<input type="button" value="点击" @click="btnHandlerClick($event)" />
div>
<script>
var vm=new Vue({
el:"#app",
data:{
},
methods: {
divHandlerClick() {
alert('我是div的点击事件！')
},
btnHandlerClick(e) {
alert('我是button的点击事件')
e.stopPropagation();
}
},
})
script>
body>
2、stop 阻止事件冒泡事件修饰符
话不多说，上案例
代码示例如下：
<body>
<div>
<input type="button" value="点击" @click.stop="btnHandlerClick" />
div>
<script>
var vm=new Vue({
el:"#app",
data:{
},
methods: {
divHandlerClick() {
alert('我是div的点击事件！')
},
btnHandlerClick() {
alert('我是button的点击事件')
// e.stopPropagation();
}
},
})
script>
body>
3、prevent阻止默认事件修饰符
对于表单的提交事件，默认提交后会重新加载页面。我们要阻止默认重新加载页面，需要在 submit事件后加.prevent 关键字就可以了
<div id="app">
<form v-on:submit.prevent="tijiao">
<input type="text" name="username" />
<input type="submit" value="提交" />
form>
div>
<script>
var vm=new Vue({
el:"#app",
data:{
},
methods: {
tijiao(){
// alert("1111")
console.log("已阻止了默认的重新加载页面")
//e.preventDefault();
}
},
})
script>
如果将stop和prevent串联，可以既阻止冒泡、又阻止默认行为
v-on:click.stop.prevent
4、capture：添加事件监听器时使用事件捕获模式
事件捕获模式与事件冒泡模式（由内向外）是一对相反的事件处理流程，当我们想要将页面元素的事件流改为事件捕获模式（由外向内）时，只需要在父级元素的事件上使用 capture 修饰符即可。
5、.self、.once 修饰符
（1） .self：只当在 event.target 是当前元素自身时触发处理函数，即不管单击还是双击还是鼠标移动等事件是在自身上，才会触发对应的函数。
（2）.once：事件只触发一次，只有第一次单击有用，后面再单击就没有用了。
三、按键修饰符
1、按键所对应的 keyCode
<body>
<div id="app" class="divDefault">
{{msg}}
<input type="text" v-on:keydown="keydown">
div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
},
methods: {
keydown(e){
console.log(e.keyCode)
if(e.keyCode==13)
{
//获取文本框中的值
this.msg=e.target.value
//清空文本框
e.target.value=""
}
}
},
})
script>
body>
改进
<body>
<div id="app" class="divDefault">
{{msg}}
<input type="text" v-on:keydown.enter = "keydown" >
div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:""
},
methods: {
keydown(e){
console.log(e.keyCode)
// if(e.keyCode==13)
// {
//获取文本框中的值
this.msg=e.target.value
//清空文本框
e.target.value=""
// }
}
},
})
script>
body>
为方便使用，Vue 提供了绝大多数常用的按键码的别名：
.enter、.tab、.delete (捕获“删除”和“退格”键)、 .esc、.space、.up、 .down、.left、.right
2、自定义按键修饰符
有部分按键是没有别名的，所以我们可以自己定义按键修饰符的别名
例如：假设F2键没有别名，我要指定F2键的别名
<body>
<div id="app" class="divDefault">
<label>姓名：label>
<input id="name" type="text" v-model="name" @keyup.a="pressF2">
div>
<script>
// Vue.config.keyCodes.f2=113
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
pressF2() {
console.log("name:"+this.name +"，是通过 F2 按键获得")
//这种写法是比上面更简洁点，``外面这个键是反单引号
console.log(`name:${this.name},是通过 F2 按键获得`)
}
}
})
script>
body>
四、系统修饰符
系统修饰符一般还跟另外一个系统修饰符一起使用才有效即系统修饰符主要是以一种组合按键的形式使用
1、键盘按键修饰符
.ctrl、.alt、.shift、.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 ，在 Windows 系统键盘 meta 对应 Windows 徽标键 ，在Sun 操作系统键盘上，meta 对应实心宝石键 。
2、鼠标按钮修饰符
.left、.right、 .middle
总结
本人的学习笔记，为了方便日后回顾，也可供大家参考，如果有错误的地方，还请各位指出。谢谢！！！