1-3 基本用法-事件
目录：
- 事件简写
- 事件对象$event
- 阻止事件冒泡
- 事件默认行为
- 键盘事件
- 事件修饰符
一、事件简写
事件触发之前我们用的v-on指令，但是v-on指令也有简写，如下：
全写： v-on:事件名="函数名" => 如：v-on:click="show" 简写： @事件名="函数名" => 如：@click="show"
例子如下：
<body>
<div id="box">
<!--全写方式绑定click事件-->
<button v-on:click="show">点我</button>
<!--简写方式绑定click事件-->
<button @click="show">简写点我</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
show(){ //show方法
console.log(111);
}
}
});
</script>
</body>
二、事件对象$event
事件对象，包含事件相关信息，如事件源(target)、事件类型(type)、偏移量(offsetx)。实例如下：
//html代码
<!--传入事件对象$event-->
<button @click="print($event)">click me</button>
//js方法
print(e){ //定义方法传入参数e，这个e参数自己定义的
console.log(e);
//console.log(e.target.innerHTML);
}
打印出来的结果如下：
所以我想输出我click button上的内容，则只需要取到事件源(target)，就可以获取到了，代码如下：
<body>
<div id="box">
<!-传入实际参数 事件对象$event--->
<button @click="print($event)">click me</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
print(e){ //定义参数，并且传参
//console.log(e);
console.log(e.target.innerHTML);
}
}
});
</script>
</body>
三、事件冒泡
3.1、什么是事件冒泡？
事件冒泡我们从字面意思理解就是当用户行为触发我们页面的定义好的事件后，会有一个由内到外的一个冒泡过程,而不是一下子就命中事件绑定的元素。
可能听起来有点模糊，接下来，我们就用一个实例来解释一下，就好了。代码如下：
<body>
<div id="box">
<!--触发write事件-->
<div @click="write">
<!--触发print事件-->
<p @click="print">
<!--触发show事件-->
<button @click="show">点我</button>
</p>
</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
show(){ //定义show方法
console.log(111);
},
print(){ //定义print方法
console.log(222);
},
write(){ //定义write方法
console.log(333);
}
}
});
</script>
</body>
输出如下：
111 222 333
3.2、阻止事件冒泡
方式一、原生js的方式
原生js的方式，依赖于事件对象，核心代码如下：
// htm代码
<!--传入参数事件对象$event-->
<button @click="show($event)">点我</button>
//js代码
show(e){
console.log(111);
e.stopPropagation(); //阻止事件的冒泡，是原生js的方式，依赖于事件对象
}
全部代码如下：
<body>
<div id="box">
<div @click="write">
<p @click="print">
<!--传入事件实例对象$event-->
<button @click="show($event)">点我</button>
</p>
</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
show(e){
console.log(111);
e.stopPropagation(); //阻止事件的冒泡
},
print(){
console.log(222);
},
write(){
console.log(333);
}
}
});
</script>
</body>
输入结果如下：
111
方式二、Vue的方式阻止事件冒泡
vue的方式就很简单啦，就是在事件后面直接加修饰符，来阻止事件冒泡，核心代码如下：
<!--直接在事件后面加上.stop--> <button @click.stop="show">点我</button>
这个@click.stop 会修饰符会自动去调用这个事件对象 e. stopPropagation()，其实效果是一样的。
我们看完整代码如下：
<body>
<div id="box">
<div @click="write">
<p @click="print">
<!--添加修饰符.stop-->
<button @click.stop="show">点我</button>
</p>
</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
show(){ //去掉传入的参数
console.log(111);
//e.stopPropagation();
},
print(){
console.log(222);
},
write(){
console.log(333);
}
}
});
</script>
</body>
这个修饰符在官网明确说明了，可以在v-on那边看下,如图(官网地址：https://cn.vuejs.org/v2/api/#v-on)：
四、事件默认行为
4.1、什么是默认事件行为？
就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转，右键呼出的菜单等等。我们可以通过js取消或更改这些默认事件。
a标签的如下：
<a href="#" @click="study()">帅高高主页链接</a>
跳转到：
http://localhost:63342/vue/B6.html?_ijt=hn59tn19hpc18jcthvt463av3u#
很明显，会跳转的时候带上 # 号，这个就是默认事件自带的href的东西，所以我们现在需要阻止默认事件。
4.2、阻止事件默认行为
方式一：采取原生js的方式，依赖于事件对象
<body>
<div id="box">
<!--传入事件对象$event-->
<a href="#" @click="study($event)">帅高高主页链接</a>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
study(e) {
console.log(444);
e.preventDefault(); //阻止默认事件
}
}
});
</script>
</body>
方式二：Vue添加修饰符的方式，阻止默认事件。这边呐，就是把href="#" 在访问的时候#号去掉
<body>
<div id="box">
<!--只需添加.prevent修饰符即可阻止默认事件行为-->
<a href="#" @click.prevent="study()">帅高高主页链接</a>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
study() {
console.log(444);
}
}
});
</script>
</body>
五、键盘事件
5.1、键盘事件
键盘事件有很多，我们生活中经常使用到，如：
回车：@keydown.13 或 @keydown.enter =>给13映射一个别名enter 上：@keydown.18 或 @keydown.up 等等
默认没有@keydown.a/b/c.....事件，可以自定义键盘事件，也称为自定义键码或者自定义键位别名
5.2、查看按键的code
e.keyCode => 回车(enter)：13 向上(up)：38
代码如下：
<body>
<div id="box">
<!--键盘按下事件，并且传入事件对象$event-->
<input type="text" @keydown="show($event)"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
show(e){
console.log(e.keyCode); //打印键盘编码
}
}
});
</script>
</body>
输入如下：
回车=> 13 向上=> 38 向下=> 40 ....
简化按键的判断：
<body>
<div id="box">
<!--用户名：<input type="text" @keydown="show($event)"/>-->
<!--直接用keycode作为修饰符-->
用户名：<input type="text" @keydown.13="print"/>
<!--直接用enter作为回车的修饰符-->
用户名：<input type="text" @keydown.enter="print"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
new Vue({
el: "#box",
methods:{
show(e){
//console.log(e.keyCode);
if(e.keyCode == 13){
console.log("您按了回车");
}
},
print(){
console.log("您按了回车")
}
}
});
</script>
</body>
5.3、自定义键盘事件
这个在官网里面也做了说明,如图：
代码如下：(配置完毕直接操作就行了，全局变量中，你想配置那个直接添加就可以了)
<body>
<div id="box">
<!--用户名：<input type="text" @keydown="show($event)"/>-->
<!--直接用keycode作为修饰符-->
用户名：<input type="text" @keydown.13="print"/>
<!--直接用enter作为回车的修饰符-->
用户名：<input type="text" @keydown.enter="print"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
//全局配置一下
Vue.config.keyCodes = {
v: 86,
f1: 112,
// camelCase 不可用
mediaPlayPause: 179,
// 取而代之的是 kebab-case 且用双引号括起来
"media-play-pause": 179,
up: [38, 87]
};
new Vue({
el: "#box",
methods:{
show(e){
//console.log(e.keyCode);
if(e.keyCode == 13){
console.log("您按了回车");
}
},
print(){
console.log("您按了回车")
}
}
});
</script>
</body>
六、事件修饰符
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
浙公网安备 33010602011771号