JavaScript 事件对照表各类事件类型与触发说明
| 鼠标事件 | 触发说明 |
|---|---|
| click | 鼠标点击元素时触发（按下并释放） |
| dblclick | 鼠标双击元素时触发 |
| mousedown | 鼠标按键在元素上按下时触发 |
| mouseup | 鼠标按键在元素上释放时触发 |
| mousemove | 鼠标在元素上移动时持续触发 |
| mouseover / mouseout | 鼠标移入 / 移出元素边界时触发（含子元素冒泡） |
| mouseenter / mouseleave | 鼠标进入 / 离开元素时触发（不冒泡） |
| contextmenu | 鼠标右键点击弹出上下文菜单时触发 |
| 键盘事件 | 触发说明 |
|---|---|
| keydown | 键盘按键按下时触发，可捕获所有按键 |
| keypress | 按键产生字符时触发（已废弃，建议用 keydown/keyup） |
| keyup | 键盘按键释放时触发 |
| 表单事件 | 触发说明 |
|---|---|
| focus / blur | 元素获得 / 失去焦点时触发 |
| change | 输入框、下拉框、单选框等值发生改变并失去焦点时触发 |
| input | 输入内容变化时立即触发（含粘贴、删除等） |
| submit | 表单提交时触发，常用于校验阻止默认提交 |
| reset | 表单被重置时触发 |
| select | 文本被选中时触发 |
| 窗口事件 | 触发说明 |
|---|---|
| load | 页面及所有资源加载完成后触发 |
| DOMContentLoaded | DOM 解析完成、资源尚未加载完时触发 |
| resize | 窗口尺寸改变时触发 |
| scroll | 滚动容器或窗口滚动时触发 |
| unload / beforeunload | 页面卸载前触发，用于提醒或清理 |
| hashchange | URL 的哈希部分改变时触发 |
| 触摸 / 指针事件 | 触发说明 |
|---|---|
| touchstart | 手指触摸屏幕时触发 |
| touchmove | 手指在屏幕上滑动时触发 |
| touchend | 手指离开屏幕时触发 |
| touchcancel | 触摸被系统中断时触发 |
| pointerdown / pointermove / pointerup | 鼠标、触控笔、手指等统一指针设备事件 |
| 拖拽事件 | 触发说明 |
|---|---|
| dragstart / dragend | 开始拖拽 / 结束拖拽时在源元素上触发 |
| dragover | 拖拽元素经过目标元素上方时持续触发，需 preventDefault 才可放置 |
| dragenter / dragleave | 拖拽元素进入 / 离开目标元素时触发 |
| drop | 拖拽元素在目标元素上释放时触发 |
JavaScript 事件对照表介绍
JavaScript 事件是用户与页面交互的核心机制，常见事件类型涵盖鼠标、键盘、表单、窗口、触摸/指针以及拖拽等，每种事件对应特定触发时机与使用场景。
▪ 鼠标事件中 click 最常用，mouseover/mouseout 会冒泡而 mouseenter/mouseleave 不冒泡，需根据子元素需求选择合适的事件避免重复触发。
▪ 键盘事件建议优先使用 keydown 捕获按键，通过 key 属性判断按键值；触摸与指针事件应在移动端考虑减少触发频率并适当优化性能。
▪ 事件可通过 addEventListener 绑定，支持冒泡与捕获两种传播阶段，并可结合 preventDefault 阻止默认行为、stopPropagation 阻止传播，从而灵活实现复杂交互逻辑。