事件概念：

1、是指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作）
2、事件是文档或者浏览器窗口中发生的，特定的交互瞬间。
3、事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
4、事件是javaScript和DOM之间交互的桥梁。

事件三要素：

事件源：是指在哪个元素引发的事件，如：a标签、div标签
事件：事件是指执行的动作 如：使用鼠标单击、双击某标签等
事件驱动程序（事件处理程序）：即执行的结果 如：单击button标签所执行的回调函数

事件修饰符：

1.prevent：阻止浏览器默认事件（常用）；
​ 2.stop：阻止事件冒泡（常用）；
​ 3.once：事件只触发一次（常用）；
​ 4.capture：使用事件的捕获模式；
​ 5.self：只有 event.target 是当前操作的元素时才触发事件；
​ 6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

一、Click事件（单击事件）

Click事件是基本的交互事件，它被用于处理用户点击页面元素的情况。在Vue中，可以使用@click指令来绑定Click事件

1、用法：

例如：<button @click="handleClick">Click Me!</button>

2、在vue组件中自定义 handleClick 方法，用于处理Click事件：

例如：methods：{

        handleClick（）{

        //处理Click事件的逻辑

        }

}

二、Input事件（文本输入事件）

Input事件是用于处理用户输入的事件，通常应用于处理用户填写表单的情况。在Vue中，可以使用v-model指令来绑定Input事件。

1、用法：

例如：<input v-model="text">

2、在Vue组件中定义text数据，用于保存用户输入的文本内容：

例如：data（）{

        return{

                text：' '

        }

}

三、Key press事件（键盘按键事件）

Keypress事件是用于处理键盘按键的事件，通常应用于处理用户进行搜索、过滤等操作的情况。在Vue中，可以使用@keypress指令来绑定Keypress事件。

1、用法：

例如：<input @keypress="handleKeypress">

2、在Vue组件中定义handleKeypress方法，用于处理Keypress事件：

例如：methods: {

                handleKeypress(event) {

                      // 处理Keypress事件逻辑

        }

}

四、Submit事件（表单提交事件）

Submit事件是用于处理表单提交的事件，通常应用于处理用户提交表单的情况。在Vue中，可以使用@submit指令来绑定Submit事件。

1、用法：

例如：<form @submit="handleSubmit"><input type="text" v-model="text"></form>

2、在Vue组件中定义handleSubmit方法，用于处理Submit事件：

例如：methods: {

        handleSubmit(event) {

                  event.preventDefault(); // 阻止表单默认提交行为

                // 处理Submit事件逻辑

        }

}

五、Mouseover事件（鼠标悬停事件）

Mouseover事件是用于处理鼠标悬停的事件，通常应用于显示、隐藏元素等操作。在Vue中，可以使用@mouseover指令来绑定Mouseover事件

1、用法：

例如：<div @mouseover="handleMouseover">...

2、在Vue组件中定义handleMouseover方法，用于处理Mouseover事件：

例如：methods: {

        handleMouseover() {

        // 处理Mouseover事件逻辑

        }

}

六、Mouseout事件（鼠标移开事件）

Mouseout事件是用于处理鼠标移开的事件，通常应用于显示、隐藏元素等操作。在Vue中，可以使用@mouseout指令来绑定Mouseout事件。

1、用法：

例如：<div @mouseout="handleMouseout">...

2、在Vue组件中定义handleMouseout方法，用于处理Mouseout事件：

methods: {

                handleMouseout() {

                        // 处理Mouseout事件逻辑

        }

}

鼠标事件：

事件名称	何时触发
auxclick	已在元素上按下并释放定点设备按钮（ANY非主按钮）。
click	在元素上按下并释放任意鼠标按键。
contextmenu	右键点击（在右键菜单显示前触发）。
dblclick	在元素上双击鼠标按钮。
mousedown	在元素上按下任意鼠标按钮。
mouseenter	指针移到有事件监听的元素内。
mouseleave	指针移出元素范围外（不冒泡）。
mousemove	指针在元素内移动时持续触发。
mouseover	指针移到有事件监听的元素或者它的子元素内。
mouseout	指针移出元素，或者移到它的子元素上。
mouseup	在元素上释放任意鼠标按键。
pointerlockchange	鼠标被锁定或者解除锁定发生时。
pointerlockerror	可能因为一些技术的原因鼠标锁定被禁止时。
select	有文本被选中。
wheel	滚轮向任意方向滚动。

焦点事件：

事件名称	何时触发
focus	元素获得焦点（不会冒泡）。
blur	元素失去焦点（不会冒泡）。

WebSocket 事件：

事件名称	何时触发
open	WebSocket 连接已建立。
message	通过 WebSocket 接收到一条消息。
error	WebSocket 连接异常被关闭（比如有些数据无法发送）。
close	WebSocket 连接已关闭。

CSS 动画事件：

事件名称	何时触发
animationstart	某个 CSS 动画开始时触发。
animationend	某个 CSS 动画完成时触发。
animationiteration	某个 CSS 动画完成后重新开始时触发。

CSS 过渡事件：

事件名称	何时触发
transitionstart	CSS转换实际上已经开始（在任何延迟之后激发）。
transitioncancel	CSS转换已被取消
transitionend	CSS转换已完成。
transitionrun	CSS转换已开始运行（在任何延迟开始之前激发）。

表单事件：

事件名称	何时触发
reset	点击重置按钮时
submit	点击提交按钮

键盘事件：

事件名称	何时触发
keydown	按下任意按键。
keypress	除 Shift、Fn、CapsLock 外的任意键被按住。（连续触发。）
keyup	释放任意按键。

拖放事件：

事件名称	何时触发
drag	正在拖动元素或文本选区（在此过程中持续触发，每 350ms 触发一次）
dragend	拖放操作结束。（松开鼠标按钮或按下 Esc 键）
dragenter	被拖动的元素或文本选区移入有效释放目标区
dragstart	用户开始拖动HTML元素或选中的文本
dragleave	被拖动的元素或文本选区移出有效释放目标区
dragover	被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）
drop	元素在有效释放目标区上释放