深入理解 JavaScript 事件体系：Window、鼠标与键盘事件详解
在 Web 前端开发中，JavaScript 事件（Events）是连接用户行为与程序逻辑的桥梁。无论是点击一个按钮、滚动页面，还是敲击键盘，本质上都是浏览器在监听并分发这些事件。
上一篇文章我们探讨了表单与焦点事件，今天我们将目光投向更宏观的 Window 事件，以及交互细节最丰富的 鼠标事件 和 键盘事件。掌握这些核心事件，是你构建复杂交互应用（如拖拽、游戏、富文本编辑器）的基石。
一、Window 事件：掌控全局的生命周期
Window 事件主要关注浏览器窗口本身的状态变化，包括页面的加载、卸载、尺寸调整以及滚动等。它们是全局性的，通常绑定在 window 对象上。
- load 事件
定义：当页面所有资源（包括图片、脚本文件、CSS 文件、iframe 等）全部加载完成后触发。
应用场景：初始化依赖 DOM 结构或图片尺寸的插件、隐藏 Loading 动画。
注意：由于它要等待所有资源加载完毕，如果页面图片很大，触发时间会较晚。现代开发中常用 DOMContentLoaded 替代，后者仅等待 HTML 解析完成。
javascript
编辑
window.addEventListener(‘load’, () => {
console.log(‘页面及所有资源已完全加载’);
document.getElementById(‘loading’).style.display = ‘none’;
});
2. unload 事件
定义：当页面正在被卸载（通常是因为请求了一个新页面或关闭了窗口）时触发。
应用场景：清除定时器、断开 WebSocket 连接、发送最后的统计数据（Beacon API）。
注意：出于安全和用户体验考虑，现代浏览器限制了此事件中的弹窗行为。
3. error 事件
定义：当 JavaScript 运行时发生错误，或者资源（如 图片）加载失败时触发。
应用场景：全局异常监控、图片加载失败时的占位图替换。
javascript
编辑
// 全局 JS 错误监控
window.addEventListener(‘error’, (e) => {
console.error(‘捕获到全局错误:’, e.message);
// 上报错误日志到服务器
});
// 图片加载失败处理
const img = document.querySelector(‘#myImage’);
img.addEventListener(‘error’, () => {
img.src = ‘fallback-image.png’; // 替换为默认图
});
4. resize 事件
定义：当浏览器窗口的大小发生变化时触发。
应用场景：响应式布局调整、Canvas 画布重绘、图表自适应。
性能优化：该事件触发非常频繁，必须配合防抖（Debounce）函数使用，否则会导致页面卡顿。
javascript
编辑
let timeoutId;
window.addEventListener(‘resize’, () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
console.log(‘窗口大小调整为:’, window.innerWidth, window.innerHeight);
// 执行重绘逻辑
}, 200); // 延迟 200ms 执行
});
5. scroll 事件
定义：当用户滚动页面（或某个可滚动元素）时触发。
应用场景：吸顶导航栏、无限滚动加载（Infinite Scroll）、“回到顶部”按钮显示。
性能优化：同样属于高频事件，建议使用节流（Throttle）或 requestAnimationFrame 来优化性能。
二、鼠标事件：精细化的交互控制
鼠标事件是用户与界面交互最直接的方式。虽然触摸屏普及，但在桌面端开发中，鼠标事件依然是核心。
- 基础点击系列
click：按下并松开同一个按键（通常是左键）。这是最常用的事件。
dblclick：连续两次快速点击。
注意：dblclick 触发前通常会先触发两次 click，设计逻辑时需避免冲突。 - 按下与抬起
mousedown：鼠标按键被按下的瞬间触发。
mouseup：鼠标按键被松开的瞬间触发。
实战技巧：自定义拖拽功能通常从 mousedown 开始监听，在 mousemove 中移动，在 mouseup 中结束。 - 移动与悬停
mousemove：鼠标在元素内部移动时持续触发。
注意：频率极高，务必做节流处理。
mouseover / mouseout：
mouseover：鼠标移入元素或其子元素时触发。
mouseout：鼠标移出元素或其子元素时触发。
痛点：这两个事件具有冒泡特性。如果父元素绑定了 mouseover，当鼠标移入其内部的子元素时，父元素的事件也会被触发（因为鼠标相对于子元素也是“移入”）。
💡 进阶推荐：mouseenter 与 mouseleave
虽然图中未列出，但实际开发中强烈推荐使用这两个事件来替代 mouseover/mouseout。它们不冒泡，只有鼠标真正穿过边界进入该元素时才触发，逻辑更清晰。
三、键盘事件：捕捉用户的输入意图
键盘事件对于表单填写、快捷键操作（如 Ctrl+S 保存）以及网页游戏至关重要。 - keydown vs keyup
keydown：按键被按下时触发。如果按住不放，会连续触发（类似打字机效果）。
用途：检测功能键（Shift, Ctrl, Alt）、方向键、游戏控制。
keyup：按键被松开时触发。
用途：确认用户完成了某个组合键操作，或停止游戏中的角色移动。 - keypress（已废弃/不推荐）
定义：当按下并产生字符值的键时触发。
现状：该事件已被标准废弃。因为它无法识别非字符键（如 Backspace, Delete, 箭头键），且在不同浏览器表现不一致。
替代方案：请使用 keydown 配合 event.key 属性来判断用户输入了什么字符。 - 关键属性 event.key
在处理键盘事件时，事件对象（Event Object）非常重要：
e.key：返回按键的名称字符串（如 “Enter”, “a”, “ArrowUp”）。这是目前最推荐的属性。
e.code：返回物理按键的代码（如 “KeyA”, “Enter”），与键盘布局无关。
e.ctrlKey, e.shiftKey：布尔值，判断是否同时按下了修饰键。
javascript
编辑
document.addEventListener(‘keydown’, (e) => {
// 示例：实现 Ctrl + S 保存功能
if (e.ctrlKey && e.key === ‘s’) {
e.preventDefault(); // 阻止浏览器默认的“另存为”行为
console.log(‘触发保存逻辑…’);
saveData();
}
});
四、总结与最佳实践
通过这两篇文章，我们构建了完整的 JavaScript 事件知识图谱：
Window 事件关注环境状态，注意性能优化（防抖/节流）。
鼠标事件关注精准交互，注意区分冒泡与非冒泡（over/out vs enter/leave）。
键盘事件关注输入意图，摒弃 keypress，拥抱 keydown + key。
最后的一个建议：在现代前端框架（Vue, React）中，虽然底层原理依然是这些原生事件，但框架提供了更优雅的语法糖（如 Vue 的 @click.stop 修饰符）。理解底层的原生机制，能让你在使用框架时更加游刃有余，也能更好地排查疑难杂症。