[TOC]
01、事件基础
1.1、事件简介
事件（Event）是JS的心脏，触发各种交互，让网页动起来。事件是浏览器网页可以监测到的行为，如页面加载、鼠标点击、键盘按键等。在这些事件中可以自定义事件处理程序，用于实现各种业务需求。
事件对象的继承关系：
常见的事件类型、事件如下：
| 鼠标事件(event) | |
|---|---|
| click(event) | 点击触发，通常是鼠标左键在一个元素上被按下并放开时 |
| dblclick | 双击触发事件 |
| contextmenu | 鼠标右键点击触发 |
| mousedown、mouseup | 鼠标按下、弹起时触发 |
| mousemove | 鼠标在元素上移动时触发 |
| onmouseover、mouseout | 鼠标移入、移出元素区域时触发 |
| mouseenter、mouseleave | 鼠标移入、移出元素区域时触发，与上面不同的是不会冒泡 |
| dragstart、dragend | 拖放事件（drag/dræɡ/拖） |
| 键盘事件(event) | |
| keydown、keyup | 键盘按键按下、松开时触发 |
| 表单事件(event) | |
| blur(event)、focusout() | 元素失去焦点，blur不会冒泡 （blue /blɜːr/ 模糊 /不乐/） |
| focus、focusin | 元素获取焦点时触发，focus不会冒泡 |
| from.submit | 提交表单form时触发，可用于表单校验 |
| change | 值发生变化时触发，文本框是在值变化且失去焦点是才触发 |
| input | 输入值改变时触发。event.preventDefault()无法阻止，因为已经改变了 |
| Document 事件(event) | 文档生命周期：DOMContentLoaded ➡️ load ➡️ beforeunload ➡️ unload |
| doc.DOMContentLoaded | 已加载 HTML并构建好DOM树，外部资源（image、css）可能尚未加载完成 - 如果遇到 |
若有收获，就点个赞吧
0 人点赞
