Vue 中常用的事件总结（ 事件的概念 +事件要素+事件修饰符）
.png)
事件概念：
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、用法：
例如：Click Me!
2、在vue组件中自定义 handleClick 方法，用于处理Click事件：
例如：methods：{
handleClick（）{
//处理Click事件的逻辑
}
}
二、Input事件（文本输入事件）
Input事件是用于处理用户输入的事件，通常应用于处理用户填写表单的情况。在Vue中，可以使用v-model指令来绑定Input事件。
1、用法：
例如：
2、在Vue组件中定义text数据，用于保存用户输入的文本内容：
例如：data（）{
return{
text：' '
}
}
三、Key press事件（键盘按键事件）
Keypress事件是用于处理键盘按键的事件，通常应用于处理用户进行搜索、过滤等操作的情况。在Vue中，可以使用@keypress指令来绑定Keypress事件。
1、用法：
例如：
2、在Vue组件中定义handleKeypress方法，用于处理Keypress事件：
例如：methods: {
handleKeypress(event) {
// 处理Keypress事件逻辑
}
}
四、Submit事件（表单提交事件）
Submit事件是用于处理表单提交的事件，通常应用于处理用户提交表单的情况。在Vue中，可以使用@submit指令来绑定Submit事件。
1、用法：
例如：
2、在Vue组件中定义handleSubmit方法，用于处理Submit事件：
例如：methods: {
handleSubmit(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 处理Submit事件逻辑
}
}
五、Mouseover事件（鼠标悬停事件）
Mouseover事件是用于处理鼠标悬停的事件，通常应用于显示、隐藏元素等操作。在Vue中，可以使用@mouseover指令来绑定Mouseover事件
1、用法：
例如：...
2、在Vue组件中定义handleMouseover方法，用于处理Mouseover事件：
例如：methods: {
handleMouseover() {
// 处理Mouseover事件逻辑
}
}
六、Mouseout事件（鼠标移开事件）
Mouseout事件是用于处理鼠标移开的事件，通常应用于显示、隐藏元素等操作。在Vue中，可以使用@mouseout指令来绑定Mouseout事件。
1、用法：
例如：...
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 | 元素在有效释放目标区上释放 |
