JS-从基础到高阶的 DOM 事件速查手册Web 开发的核心在于交互，而交互的本质就是对各类事件Events的精准捕捉与

Web 开发的核心在于交互，而交互的本质就是对各类事件Events的精准捕捉与响应。本文整理了从鼠标、键盘到拖拽、窗口的所有主流事件类型，建议收藏作为日常开发的速查工具。

一、鼠标事件 (Mouse Events)

鼠标事件是 Web 交互中频率最高的一类。

事件类型	触发时机	关键特性
`click`	左键单击	移动端有300ms延迟检测双击
`dblclick`	鼠标双击	需在300ms内完成两次点击
`mousedown/up`	鼠标按下 / 释放	拖拽功能的核心起点与终点
`mousemove`	在元素内移动	高频触发，实战中务必配合“节流 (Throttle)”优化
`mouseenter/leave`	进入 / 离开元素	不冒泡，进入子元素不会重复触发（推荐用于 UI 反馈）
`mouseover/out`	进入 / 离开元素及子元素	会冒泡，在子元素间移动会频繁切换触发
`contextmenu`	右键点击	常配合 `e.preventDefault()` 禁用或自定义右键菜单
`wheel`	滚轮滚动	通过 `deltaY` 判断滚动方向

坐标获取技巧：

// 获取相对于浏览器视口的坐标
element.addEventListener("click", (e) => {
  console.log(`位置坐标: X=${e.clientX}, Y=${e.clientY}`);
});

用于处理快捷键、搜索框提交等逻辑。

事件类型	触发时机
`keydown`	按下任意键（按住不放会连续触发）
`keyup`	释放按键

💡 建议：如果想要匹配按下的键值，可通过event.key来匹配

事件类型	典型用途
`load`	页面所有资源（含图片、样式）加载完成。用于依赖尺寸的初始化。
`resize`	窗口缩放。常用于 Echarts 图表重绘或响应式适配。
`scroll`	滚动。用于懒加载、吸顶效果、无限滚动。
`hashchange`	URL 的 `#` 变化。应用于单页应用路由。

拖拽 API 可以实现极其丰富的交互，如文件上传、排序等。

1. 拖拽源 (被拖动的元素)：

2. 释放目标 (接收拖拽的区域)：

移动端点击：如果你在做移动端页面，虽然 click 现在很快，但追求极致响应可以使用 touchstart。
性能优化：mousemove、scroll 和 resize 这类事件在 1 秒内会触发几十上百次，直接在回调里写重逻辑会导致页面卡顿，请务必使用 节流 (Throttle) 。
冒泡风险：在做下拉菜单或悬浮提示时，优先选择 mouseenter/mouseleave，可以避免复杂的冒泡带来的闪烁 Bug。