目录
2.5 self 只有 event.target 是当前操作的元素时,才会触发事件
3.2.2 系统修饰键:ctrl、alt、shift、win
1. 基本事件使用
在Vue前端框架笔记01:初识vue_m1m2m3mmm的博客-CSDN博客一文中,我们提到vue实例对象中的 el 键和data 键,而vue中的事件则是定义在methods键中。
- 定义事件需要使用 v-on: 指令,它可以缩写为 @
- 定义在data中的数据才会使用数据代理,methods中的事件函数不会进行数据代理
- 事件默认参数 $event,在无参时可以不定义,在有参数时则必须定义
- methods中的函数应该定义为普通函数,才能保证其this指向vm对象;如果写成箭头函数则指向的windows
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id='demo'>
<p> {{name}}</p>
<button v-on:click='showInfo1'>点我</button>
<button @click='showInfo2($event, 66)'>点我哦</button>
<p> 1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名;<br>
2.事件的回调需要配置在methods对象中,最终会在vm 上;<br>
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;<br>
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或组件实例对象;<br>
5.@click="demo”和@click="demo($event)”效果一致,但后者可以传参;<br>
</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data:{
name:'SY'
},
methods:{
showInfo1(event){
alert(event.target.innerText)
console.log(this) // 这里的 this 就是 vm 实例本身
},
showInfo2(event, number){
alert('传入的参数为:' + number)
}
}
})
</script>
</body>
</html>
2 事件修饰符
主要有6种,前三种比较常用:
- prevent 阻止默认事件
- stop 阻止事件冒泡
- once 事件只能触发一次
- capture 使用事件捕获模式
- self 只有 event.target 是当前操作的元素时,才会触发事件
- passive 立即执行事件的默认行为
2.1 prevent 阻止默认事件
以 a 标签为例,它的默认事件为点击跳转链接,如果不想跳转链接,则为其添加事件修饰符
<!-- 阻止默认事件 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.prevent='showInfo1()'>点进入视频讲解</a>
2.2 stop 阻止事件冒泡
当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。
注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。
<!-- 阻止事件冒泡 -->
<div class='demo1' @click='showInfo1()'>
<button @click.stop='showInfo1()'> 点我按钮 </button>
</div>
2.3 once 事件只触发一次
只会在第一次点击时,触发事件
<!-- 事件只能触发一次 -->
<button @click.once='showInfo1()'> 我只能点一次 </button>
2.4 capture 使用事件捕获模式
事件捕获是由Netscape Communicator团队提出来的,是先由最上一级的节点先接收事件,然后向下传播到具体的节点。
这个正好与事件冒泡的顺序相反
<!-- 使用事件捕获模式 -->
<!-- 先事件捕获,再事件冒泡;而事件的处理是在事件冒泡阶段 -->
<!-- 点div2时,先显示2,在显示1;如果使用capture,先显示1再显示2 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
2.5 self 只有 event.target 是当前操作的元素时,才会触发事件
self 也有阻止事件冒泡的功能,在下面的例子中:
按钮被点击,只会触发自己的事件,而不会触发div的事件,因为当前event.target的元素是按钮
<!-- 只有 event.target 是当前操作的元素时,才会触发事件-->
<div class='demo1' @click.self='showInfo1()'>
<button @click.stop='showInfo1()'> 点击当前元素才能触发 </button>
</div>
2.6 passive 立即执行默认事件
如下代码中:
- 若滚轮滚动,会触发默认事件:滚动条滚动 和 demo函数定义的操作
- 使用passive修饰符,滚动条立马滚动,然后执行demo回调函数
- 不使用passive修饰符,先执行demo回调函数,再滚动滚动条
- scroll是滚动条的滚动,它可以由引起滚动条滚动的所有行为触发,如鼠标滚轮和键盘下键
- wheel单纯的指的是鼠标滚轮的滚动
<!-- 事件的默认行为会立即执行,无需等待事件的回调执行 -->
<!-- 在移动端或平板中,使用的多一些 -->
<!-- scroll:滚动条的滚动,键盘的👇也会触动该时间 -->
<!-- wheel:滚轮滚动 -->
<ul @wheel.passive='demo' class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
2.7 修饰符连用
如下代码中:
- 先用使用 prevent 阻止默认事件
- 再使用 stop 阻止冒泡
<div class='demo1' @click='showInfo1()'>
<!-- 阻止默认事件,然后阻止冒泡 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.prevent.stop='showInfo1()'>点进入视频讲解</a
</div>
如下代码,与上面的代码功能相同,但是先阻止冒泡,再阻止默认事件
<div class='demo1' @click='showInfo1()'>
<!-- 阻止默认事件,然后阻止冒泡 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.stop.prevent='showInfo1()'>点进入视频讲解</a
</div>
2.8 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Document</title>
<style>
*{margin-top: 20px;}
.demo1{height: 50px; background-color: blue;}
.box1{padding: 5px; background-color: blueviolet;}
.box2{padding: 5px; background-color: burlywood;}
.list{width: 200px; height: 200px; background-color: chartreuse; overflow: auto;}
li{height: 100px;}
</style>
</head>
<body>
<div id='demo'>
<p>
1. prevent 阻止默认事件<br>
2. stop 阻止事件冒泡<br>
3. once 事件只能触发一次<br>
4. capture 使用事件捕获模式使用事件捕获模式
5. self 只有 event.target 是当前操作的元素时,才会触发事件
6. passive 立即执行事件的默认行为
</p>
<!-- 阻止默认事件 -->
<a href='https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15' @click.prevent='showInfo1()'>点进入视频讲解</a>
<!-- 阻止事件冒泡 -->
<div class='demo1' @click='showInfo1()'>
<button @click.stop='showInfo1()'> 点我按钮 </button>
</div>
<!-- 事件只能触发一次 -->
<button @click.once='showInfo1()'> 我只能点一次 </button>
<!-- 使用事件捕获模式 -->
<!-- 先事件捕获,再事件冒泡;而事件的处理是在事件冒泡阶段 -->
<!-- 点div2时,先显示2,在显示1;如果使用capture,先显示1再显示2 -->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!-- 只有 event.target 是当前操作的元素时,才会触发事件-->
<div class='demo1' @click.self='showInfo1()'>
<button @click.stop='showInfo1()'> 点击当前元素才能触发 </button>
</div>
<!-- 事件的默认行为会立即执行,无需等待事件的回调执行 -->
<!-- 在移动端或平板中,使用的多一些 -->
<!-- scroll:滚动条的滚动,键盘的👇也会触动该时间 -->
<!-- wheel:滚轮滚动 -->
<ul @wheel.passive='demo' class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<p>
</p>
</div>
<script type="text/javascript">
const vm = new Vue({
el: '#demo',
data:{
name:'SY'
},
methods:{
showInfo1(event){
alert('按钮被点击了')
},
showMsg(){
console.log(msg)
},
demo(){
for (let i = 0; i < 1000; i++)
{
console.log('#')
}
console.log('累坏了')
}
}
})
</script>
</body>
</html>
3 键盘事件
3.1 按键别名
在键盘事件后,添加 .enter别名,就默认表示按下了Enter键。
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
Vue中常用的别名:
- 回车,enter;
- 删除或退格,delete;
- 退出,esc;
- 空格,space;
- 换行,tab;
- 上下左右,up/down/left/right
键盘的每个按钮,都有名字和编号;因此,vue未提供的别名,可以使用按键原始的名字去拿;但是要注意转为kebab。如切换大小写按键CapsLock要写成 caps-lock。
<input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo">
并不是所有的按键都可以绑定事件,如调整键盘背光的按键。
3.2 五个特殊的按键
3.2.1 Tab键
Tab键有将光标从当前目标切换到其他目标的功能,因此,应该绑定keydown事件,不能绑定keyup事件,因为tab按下的时候,焦点已经切走了。
3.2.2 系统修饰键:ctrl、alt、shift、win
如果配合 keyup, 需按下 修饰键,再按下其他键,再释放其他键,才会触发事件.
如下代码中,只有点击 Ctrl + y 时,才能触发键盘事件
<input type="text" placeholder="按下回车提示输入" @keydown.ctrl.y="showInfo">
如果配合 keydown 使用,则会正常触发事件
<input type="text" placeholder="按下回车提示输入" @keydown.meta="showInfo">
3.3 不推荐的做法
3.3.1 使用按键编码指定按键
<input type="text" placeholder="按下回车提示输入" @keydown.13="showInfo">
3.3.2 自定义按键别名
Vue.config.keyCodes.huiche = 13 // 自己定义了一个别名按键,不推荐
3.4 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id='demo'>
<p> @keydown 按键按下触发事件,@keyup 按键抬起才触发事件</p>
<p> Vue中常用的别名:回车,enter; 删除或退格,delete; 退出,esc; 空格,space; 换行,tab; 上下左右,up/down/left/right </p>
<p> 键盘的每个按钮,都有名字和编号;因此,vue未提供的别名,可以使用按键原始的名字去拿;但是要注意转为kebab,如切换大小写按键CapsLock要写成 caps-lock</p>
<p> Tab键有将光标从当前目标切换到其他目标的功能,因此,应该绑定keydown事件,不能绑定keyup事件,因为tab按下的时候,焦点已经切走了。</p>
<p> 系统修饰键:ctrl、alt、shift、win </p>
<p> 如果配合 keyup, 需按下 修饰键,再按下其他键,再释放其他键,才会触发事件 </p>
<p> 如果配合 keydown 使用,则会正常触发事件 </p>
<p> 可以通过 按键编码 去指定按键,如 @keyup.13 表示enter键,目前不推荐 </p>
<p> 自定义别名</p>
<input type="text" placeholder="按下回车提示输入" @keydown.huiche="showInfo">
</div>
<script type="text/javascript">
Vue.config.keyCodes.huiche = 13 // 自己定义了一个别名按键,不推荐
const vm = new Vue({
el: '#demo',
data:{
name:'SY'
},
methods:{
showInfo(e){
// if (e.keyCode != 13) return
console.log(e.target.value) // 拿到控件输入的值,打印在控制台
console.log(e.key, e.keyCode) //打印按键的名字, 按键编码
}
}
})
</script>
</body>
</html>