event的几个常用事件，及vue3中常用按键修饰符的简单说明

事件类型

‌鼠标事件‌（MouseEvent）：这类事件与鼠标操作相关，如点击、双击、鼠标移动等。
‌键盘事件‌（KeyEvent）：这类事件与键盘操作相关，如按键按下、释放等。
‌动作事件‌（ActionEvent）：这类事件通常与用户执行的动作相关，如按钮点击。
‌窗口事件‌（WindowEvent）：这类事件与窗口或框架的操作相关，如窗口打开、关闭等。

事件处理的基本概念和流程

‌定义事件类型‌：首先需要定义需要处理的事件类型，例如鼠标事件、键盘事件等。
‌创建事件源‌：创建一个能够触发事件的组件，例如一个按钮。
‌注册事件监听器‌：为特定事件注册一个监听器，当事件发生时执行相应的处理函数。
‌编写事件处理逻辑‌：编写处理事件的逻辑代码。
‌测试与验证‌：测试事件处理逻辑是否按预期工作。

事件对象的基本属性和方法

‌event.target‌：指向触发事件的元素。通过检查event.target，可以确定哪个元素触发了事件。这在处理复杂界面中的事件时非常有用。

‌event.currentTarget‌：指向当前正在处理事件的元素，通常与事件监听器绑定的元素相同。
‌event.preventDefault()‌：取消事件的默认行为，例如阻止链接的默认跳转。
‌event.stopPropagation()‌：阻止事件进一步传播到其他节点。

Vue3中常用的事件修饰符

Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

vue3中的修饰符，只是对Html中常用的一些封装。