常见 DOM 事件全解析
DOM 事件是用户与网页交互的核心机制，分为 用户交互事件、文档加载事件、表单事件、键盘事件 等 8 大类：
一、鼠标事件
| 事件 | 触发时机 | 典型应用场景 |
|---|---|---|
click |
点击元素（按下+释放） | 按钮操作、导航跳转 |
dblclick |
双击元素 | 文件/图片编辑 |
mousedown |
鼠标按下 | 拖拽开始、自定义菜单 |
mouseup |
鼠标释放 | 拖拽结束 |
mousemove |
鼠标在元素上移动 | 实时坐标跟踪、绘图工具 |
mouseover |
鼠标进入元素（冒泡） | 悬停提示 |
mouseout |
鼠标离开元素（冒泡） | 关闭提示 |
mouseenter |
鼠标进入元素（不冒泡） | 精确悬停控制 |
mouseleave |
鼠标离开元素（不冒泡） | 离开动画 |
contextmenu |
右键点击 | 自定义上下文菜单 |
示例：拖拽实现
let isDragging = false;
element.addEventListener('mousedown', () => {
isDragging = true;
});
document.addEventListener('mousemove', (e) => {
if (isDragging) {
element.style.left = `${
e.clientX}px`;
element.style.top = `${
e.clientY}px`;
}
});
document.addEventListener('mouseup', (
