JavaScript 详细展示常用事件类型-CFANZ编程社区

📚 JavaScript 常用事件类型详解

我们将事件按类别分组，方便你查阅和理解。

🖱️ 一、鼠标事件（Mouse Events）

事件名	说明	常用场景	补充说明
click	鼠标点击元素时触发	按钮、链接、弹窗关闭等	只触发一次
dblclick	鼠标双击	放大图片、选中内容	不同浏览器敏感度略有差异
mousedown	按下鼠标按钮	拖拽起点、自定义点击样式	可判断按下的是哪个键
mouseup	松开鼠标按钮	拖拽终点、点击结束事件	常配合 mousedown 使用
mousemove	鼠标移动时触发	鼠标跟随特效、画板	高频触发，小心性能问题
mouseenter	鼠标进入元素区域	菜单悬浮、提示框显示	不会冒泡
mouseleave	鼠标离开元素区域	提示框隐藏、样式恢复	不会冒泡
mouseover	鼠标移入（包含子元素）	菜单 hover 效果	会冒泡
mouseout	鼠标移出（包含子元素）	hover 清除	会冒泡
contextmenu	右键菜单事件	自定义右键菜单	需 e.preventDefault() 禁止默认行为

⌨️ 二、键盘事件（Keyboard Events）

事件名	说明	常用场景	补充说明
keydown	按键被按下（不松开）时触发	快捷键、输入预览	可获取 e.key, e.code
keypress ✅（已废弃）	按下字符键（仅限可输入字符）	老项目兼容性用途	不推荐新项目使用
keyup	按键被松开时触发	搜索框输入完成、游戏控制	可组合 keydown

推荐使用：keydown + keyup，避免 keypress

📋 三、表单事件（Form/Input Events）

事件名	说明	常用场景	补充说明
input	输入框值发生变化时触发	实时搜索提示、字符统计	触发频率高，适合监听变化
change	表单值被更改后失焦触发	下拉框、单选框、文件上传	input 适合文本，change
submit	表单提交时触发	登录、注册、评论表单	默认刷新页面，记得 e.preventDefault()
focus	元素获得焦点	表单聚焦样式提示	可配合 input 边框高亮
blur	元素失去焦点	表单校验、隐藏提示	表单校验常用触发点
reset	重置表单时触发	清空输入	与 <form> 关联

🧱 四、窗口和页面事件（Window / Document）

事件名	说明	常用场景	补充说明
load	页面资源加载完毕后触发	初始脚本运行	<script defer> 可替代
DOMContentLoaded	HTML 文档解析完毕（不等资源）	更快初始化 JS	推荐使用
resize	窗口尺寸改变	响应式布局调整	高频触发，建议防抖处理
scroll	页面或元素滚动时	无限滚动加载	高频触发，注意性能优化
unload	页面卸载前触发	数据上报	兼容性差，已不推荐使用
beforeunload	离开页面前警告	离开提示“确定要离开吗？”	注意浏览器限制提示内容

🔘 五、控件相关事件（Button / Checkbox / Select）

事件名	说明	常用场景
click	按钮点击事件	表单提交、跳转操作
change	复选框/单选框状态变化	配送选项、多选题等
select	选中文本触发	富文本编辑器等

📦 六、拖拽和高级事件（进阶使用）

事件名	说明	常用场景
dragstart / drag / dragend	拖拽元素生命周期事件	文件上传、排序拖拽
dragenter / dragover / drop	拖动到目标区域	拖放上传、列表操作
animationstart / animationend	CSS 动画生命周期	触发 JS 动效或后续逻辑
transitionend	CSS 过渡结束	动画链式触发

🧪 常用事件绑定方式对比

// 方法一：HTML内联
<button onclick="alert('点击了')">点我</button>

// 方法二：JS绑定（推荐）
document.getElementById("btn").addEventListener("click", function () {
  alert("你点击了按钮");
});

🧠 如何选择正确的事件类型？

目的	推荐事件
监听按钮点击	click
实时监听输入	input
表单提交处理	submit（配合 preventDefault()）
页面加载后运行脚本	DOMContentLoaded
获取用户按键	keydown（配合 e.key）
响应窗口尺寸变化	resize（建议节流防抖）
表单校验失焦检查	blur

✅ 总结一句话

“事件 = 用户和页面之间的对话；你监听了什么，决定了页面如何回应用户。”