vue3.0---事件处理

一、元素的事件绑定

• v-on:type=" " 简写@type=" "
• 组件上method属性上写事件的方法。

		<!-- 元素的事件绑定 -->
   	<button v-on:click="handle">事件</button>
   	<!-- 简写 -->
   	<button @click="handle">事件</button>

二、事件修饰符

• 在事件处理程序中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求，尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
• Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
• 修饰符可以连用。
• 事件里面的this指向当前组件，3.0 版本之前输出的this指当前组件
• vueComponent对象，3.0版本生成的是Proxy对象，但是等价于当前组件.

修饰符	作用
.stop	阻止事件冒泡
.prevent	阻止事件默认行为
.capture	修改冒泡为捕获
.self	只能点击自身才触发，只有在 event.target 是当前元素自身时触发处理函数，即事件不是从内部元素触发的
.once	当前事件只能触发一次
.passive	不阻止默认事件，目的是告诉浏览器，你可以不用去查询程序有没有默认事件，意义是提前告知，提高性能

   <!-- 事件冒泡 -->
   <div @click="maopao" class="child">
     <!-- .stop修饰符阻止事件冒泡  -->
     <button @click.stop="maopao">child子集</button>
   </div>
   <!-- 事件捕获 -->
   <div @click.capture="buhuo(1)" class="child">
     <!-- .capture捕获修饰符，修改冒泡为捕获  -->
     <button @click="buhuo(2)">child子集</button>
   </div>
   <!-- .prevent阻止事件默认行为的修饰符  -->
   <form @submit.prevent="regest">
     <input type="text" name="name">
     <button>注册</button>
   </form>
   <!-- .self修饰符，自身执行，类似于委托，委托就是父类把它的元素委托给子类但是如果添加了.self修饰符，就只能点击自身才触发，e.target是自身才可以  -->
   <div @click.self="self" class="child">
     <button @click="self">child子集</button>
   </div>
   <!-- once修饰符当前事件只能触发一次 -->
   <button @click.once="once">触发一次</button>
   <!-- passive修饰符不阻止默认事件，目的是告诉浏览器，你可以不用去查询程序有没有默认事件，意义是提前告知，提高性能 -->
   <div class="par" v-on:scroll.passive="scroll">
     MVVM(Model View ViewModel)是一种基于MVC的设计，开发人员在HTML上写一些Bindings,利用一些指令绑定，
     就能在Model和ViewModel保持不变的情况下，很方便的将UI设计与业务逻辑分离，从而大大的减少繁琐的DOM操作。
     相比前面两种模式，MVVM 模式只是把MVC的Controller和MVP的Presenter 改名为 ViewModel，它采用双向绑定
     （data-binding）：View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上显示。
   </div>
 </div>

• 注：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
• 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。.passive 会告诉浏览器你不想阻止事件的默认行为。

三、键盘修饰符

修饰符	作用
.enter	按回车键触发事件
.tab	在输入中文的时候按下Tab键会触发事件，但是输入英文的时候不会触发事件
.delete	按回退键(Backspace)和删除键(Delete)触发事件
.esc	按Esc键触发事件
.space	按空格键触发事件
.up	按向上箭头触发事件
.down	按向下箭头触发事件
.left	按向左箭头触发事件
.right	按向右箭头触发事件

   <!-- .enter按回车键触发事件 -->
   <input type="text" @keyup.enter="keyp">
   <!-- .tab在输入中文的时候按下Tab键会触发事件，但是输入英文的时候不会触发事件 -->
   <input type="text" @keyup.tab="keyp">
   <!-- .delete按回退键(Backspace)和删除键(Delete)触发事件 -->
   <input type="text" @keyup.delete="keyp">
   <!-- .esc按Esc键触发事件 -->
   <input type="text" @keyup.esc="keyp">
   <!-- .space按空格键触发事件 -->
   <input type="text" @keyup.space="keyp">
   <!-- .up按向上箭头触发事件 -->
   <input type="text" @keyup.up="keyp">
   <!-- .down按向下箭头触发事件 -->
   <input type="text" @keyup.down="keyp">
   <!-- .left按向左箭头触发事件 -->
   <input type="text" @keyup.left="keyp">
   <!-- .right按向右箭头触发事件 -->
   <input type="text" @keyup.right="keyp">

四、系统修饰符

修饰符	作用
.ctrl	按ctrl键触发事件
.alt	按alt键触发事件
.shift	按shift键触发事件
.meta	按meta键触发事件

• 在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
• 请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。

   <!-- 按住shift再点击才会触发事件 -->
   <input type="text" @click.shift="keyp">
   <!-- 按住ctrl再点击才会触发事件 -->
   <input type="text" @click.ctrl="keyp">
   <!-- 按住ctrl+shift再点击才会触发事件 -->
   <input type="text" @click.ctrl.shift="keyp">
   <!-- 按住ctrl+enter才会触发事件 -->
   <input type="text" @keyup.ctrl.enter="keyp">

1. .exact 修饰符

• .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

   <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
   <input @click.ctrl="keyp">
   <!-- 有且只有 Ctrl 被按下的时候才触发 -->
   <input @click.ctrl.exact="keyp">
   <!-- 没有任何系统修饰符被按下的时候才触发 -->
   <input @click.exact="keyp">

2.鼠标按键修饰符

修饰符	作用
.left	按鼠标左键触发事件
.right	按鼠标右键触发事件
.middle	按鼠标中键滚轮触发事件

   <!-- 鼠标修饰符,鼠标的左右中键 -->
   <input @click.left="keyp">
   <input @click.right.prevent="keyp">
   <input @click.middle="keyp">

五、事件的执行参数

• 事件的执行参数，类似原生js的时间执行参数。
• 最常用的就是event.target，触发当前的目标元素。
• event.target、event.srcElement、event.toElement都是触发当前的目标元素。
• 当前事件在执行的时候如果没有参数传递，那么默认的第一个参数就是事件执行参数event，有传递参数时，暂时找不到event事件执行参数。
• 传递参数时，怎么找event?
• 在方法上传递参数$event，指的就是event。

<template>
   <div id="event">
       <!-- 事件的执行参数，类似原生js的时间执行参数 -->
       <button @click="handle(1,$event)">按钮</button>
   </div>
</template>
<script>
export default {
   name:"event",
   methods: {
       handle(index,e){
           //事件执行参数可以使用原生的js
           let event=window.event;
           console.log(event);
           //最常用的就是event.target，触发当前的目标元素
           //event.target、event.srcElement、event.toElement都是触发当前的目标元素
           //当前事件在执行的时候如果没有参数传递，那么默认的第一个参数就是事件执行参数event，有传递参数时，暂时找不到event事件执行参数
           //console.log(e); //event   
           //console.log(index,e);//undefined 1
           //传递参数时，怎么找event?
           //在方法上传递参数$event，指的就是event
           console.log(e);//event
       }
   },
}
</script>