我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…
👨🎓作者：Java学术趴
💌公众号：Java学术趴
🚫特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系小编授权。
🙏版权声明：文章里的部分文字或者图片来自于互联网以及百度百科，如有侵权请尽快联系小编。微信搜索公众号Java学术趴联系小编。
☠️每日毒鸡汤：这个社会是存在不公平的，不要抱怨，因为没有用！人总是在反省中进步的！
👋大家好！我是你们的老朋友Java学术趴，好久没有时间写文章，最近忙着找工作。没有太多的时间给大家分享文章，从今天开始给大家持续发布新的技术文章，还希望大家多多支持支持。新的一年就要到来了，还记着在前几年，从SSM到SpringBoot，在到SpringBoot+vue2.0的时代。今年估计又会发生巨大的编程语言变革。俗话说：时代的几步必然会带动科技的发展，科技的发展必将带来新一波编程语言的到来。在今年，个人认为Vue3.0的时代就会到来，现在我们正处于Vue2.0+Vue3.0的时代，今年Vue3.0必将会替代Vue2.0的存在。
我们这篇文章也是会从Vue2.0到Vue3.0来一个过度，让大家先巩固一下Vue2.0，之后Vue3.0进发。大家如果感觉有帮助的话，可以点赞多支持支持。感谢感谢~~💓💓💓
1.9 事件处理
1.9.1 事件处理的基本使用
事件的基本使用：
1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名。
2. 事件的回调需要配置在methods对象中，最终会在vm上。
3. methods中配置的函数，不要使用箭头函数，否则this就不是vm了。而是windows。
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象。
5. @click='dome' 和 @click='dome($event)' 和 @click='dome($event,number)' 效果是一样的，但是后者就可以传参。
6. $event 是固定的，不可以修改，这个代表的就是调用这个函数的DOM对象。
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>事件处理</title>
<!-- 导入Vue.js 文件 -->
<script type="text/javascript" src="../../../../../js/vue.js"></script>
</head>
<body>
<!-- 声明一个容器 -->
<div id="root">
<h2>欢迎来到清华大学！</h2>
<!-- 这段代码代表的函数：当点击这个按钮的时候，会出发鼠标单机事件，之后调用show1()函数-->
<!-- 这里使用show1()或者是show的效果是一样的。都会触发这个事件。
但是使用show()的方式不可以在Vue的show(event)中获取到这个使用这个函数DOM对象。
因为当用户在调用的时候传递参数的话，会覆盖掉这个event对象。
而且此时show()中还没有参数，所有输出的event为undefined。
如果输出show(666)，此时输出的数据为666，但是只存在用户输入的数据，event对象消失了。
使用 show($event,666,'cyb')的方式来获取DOM对象以及用户输入的数据(多个数据)。
注意：$event这个值是固定的，不是自定义的，不可以改变，这个$event代表的就是DOM这个对象。
这个event就是这个DOM对象。
使用show的方式可以获取到DOM对象。这个event就是这个dom对象。
如果多个事件调用这个函数，那么可以获取到不同的DOM。
事件处理的时候传递的参数是data中没有的。如果是data中存在的，不用进行传递。
直接在函数中使用 this.data中的数据即课获取到data中的数据。
-->
<button v-on:click="show1">Vue1(无参数)</button>
<!-- v-on:click的简化写法：v-on:click <==> @click -->
<button @click="show2($event,'程云博',2)">Vue2(有参数)</button>
<!-- 这里使用的是普通的JavaScript的事件，使用事件句柄的方式或者是脚本块的方式 -->
<!-- 在javaScript中使用事件句柄的方式调用函数。
只能使用 show1() 的形式调用，不可以使用show1的方式调用。-->
<button onclick="show1()">JavaScript</button>
<!--
总结：在普通的JavaScript中使用 onclick="show()" 的形式(加括号)
在Vue中使用 v-on:click="show" 的形式 (不加括号)
-->
</div>
<!-- 声明一个MV -->
<script type="text/javascript">
Vue.config.productionTip = false;
/* 注意：我们如果使用Vue的方式来获取函数执行相应的事件，需要将函数写入到Vue对象中。
* 写到这个地方只是一个普通的函数，只是没有使用Vue时纯的JavaScript函数时间处理。
* 得使用事件句柄或者是脚本块的方式来获取的函数处理事件。
* */
function show1(event){
console.log(event);
alert("欢迎光临！");
}
const vm = new Vue({
el:'#root',
/* data用来存储数据 */
data:{
name:'清华大学',
/*
我们也可以将函数不写到methods对象中，可以写到data对象中。
但是写到data对象中，vue会对这个函数做数据代理。生成getter/setter方法。
我们此时声明的是函数，只是拿过来给别人调用的，根本不涉及到修改。
所有给函数做数据代理是多余的并且还会降低浏览器的性能。
实际开发中我们就将函数写到 methods对象中，不写到 data对象中。
只有data对象中的数据，才存在数据代理以及数据劫持。
show2(event,string,number){
console.log(event.target); // <button>Vue2</button>
console.log(string); // 程云博
console.log(number); // 2
alert("同学您好！");
}*/
},
/* methods用来存储函数，这些函数称为回调函数 */
methods:{
/* 这里是对象中函数的简化写法 省略了 :function*/
/* 在函数中会存在一个参数，这个参数是调用该函数HTML中的DOM对象 */
/*show:(event)=> : 这里不写箭头函数，一旦写了箭头函数，那么this就是windows，而不是Vue对象了*/
// 这个 event是自定义的，获取的是DOM对象。
show1(event){
console.log(event.target); // <button>Vue1</button>
console.log(this === vm); // true。此时this是Vue对象。
alert("同学您好！");
},
/* 参数的名字都是自定义的。*/
show2(event,string,number){
console.log(event.target); // <button>Vue2</button>
console.log(string); // 程云博
console.log(number); // 2
alert("同学您好！");
}
}
})
/*
* 注意：methods中的所有函数都在vm对象中，和name属性一样。
* 但是此时发生的不是数据代理，这个是函数，是定死的内容，不涉及改变之类的。
* 只是将methods中的函数简单的复制给了 vm 对象。
*
* 我们也可以将函数不写到methods对象中，可以写到data对象中。
* 但是写到data对象中，vue会对这个函数做数据代理。生成getter/setter方法。
* 我们此时声明的是函数，只是拿过来给别人调用的，根本不涉及到修改。
* 所有给函数做数据代理是多余的并且还会降低浏览器的性能。
*
* 实际开发中我们就将函数写到 methods对象中，不写到 data对象中。
*
* 只有data对象中的数据，才存在数据代理以及数据劫持。
* */
</script>
</body>
</html>
1.9.2 事件修饰符
Vue中常见的事件修饰符：
1. prevent：阻止默认事件(常用)
2. stop：阻止事件冒泡(常用)
3. once：事件只触发一次(常用)
4. capture：使用事件的捕获模式。
5. self：只有event.target是当前操作的元素是才触发事件。
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。
7. stop - 调用 event.stopPropagation()。
8. prevent - 调用 event.preventDefault()。
9. capture - 添加事件侦听器时使用 capture 模式。
10. self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
11. {keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
12. native - 监听组件根元素的原生事件。
13. once - 只触发一次回调。
14. left - (2.2.0) 只当点击鼠标左键时触发。
15. right - (2.2.0) 只当点击鼠标右键时触发。
16. middle - (2.2.0) 只当点击鼠标中键时触发。
17. passive - (2.3.0) 以 { passive: true } 模式添加侦听器
Vue中使用事件修饰符举例：
<div id="root">
<h2>欢迎来到{{name}}学习！</h2>
<!--需求：当触发按钮事件之后，弹出提示框，但是不会跳转到指定的页面。
JavaScript中使用的方式：href="javaScript:void(0)"
Vue中添加一个事件修饰符，阻止默认事件的发生。
-->
<!-- 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="show($event)">阻止默认事件</a>
<div class="demo1" @click="show($event)">
<!-- 阻止事件冒泡
可以看出在按钮的外边的div盒子又调用了一次show函数，当用户点击一次按钮的时候，
会调用一次show函数，进行一次弹窗。当点击完按钮，
外边嵌套的div又会调用一次show函数，进行一次弹窗。这就是典型的事件冒泡。
此时就要阻止这个事件冒泡的发生
我们给按钮单机事件加入一个 事件修饰符 stop,就是让这个按钮调用完这个show函数之后，
嵌套这个按钮的盒子就不会在调用这个函数了，阻止函数的调用。
-->
<button @click="show.stop($event)">阻止事件冒泡</button>
</div>
<!-- 事件只触发一次 -->
<button @click.once="show($event)">事件只会触发一次</button>
<!-- 修饰符可以连续调用 -->
<div class="demo1" @click="show($event)">
<!-- 既阻住了网页跳转又阻止了事件冒泡。这两个修饰符谁写在前后都一样，实现的效果都是一样的。
只是调用的顺序不同。
-->
<a href="https://www.baidu.com" @click.prevent.stop="show($event)">阻止默认事件和事件冒泡</a>
</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false; // 阻止 Vue 在启动时生成生产提示。
const vm = new Vue({
el:'#root', // el用于指定当前Vue实列为哪个容器服务，值通常为css选择器字符串。
data:{
name:'清华大学'
},
methods:{
show(){
alert('同学，你好！');
}
}
})
</script>
</body>
</html>
