常见 DOM 事件全解析
常见 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', (