在 Web 前端开发中，JavaScript 事件（Events）是连接用户行为与程序逻辑的桥梁。无论是点击一个按钮、滚动页面，还是敲击键盘，本质上都是浏览器在监听并分发这些事件。
上一篇文章我们探讨了表单与焦点事件，今天我们将目光投向更宏观的 Window 事件，以及交互细节最丰富的 鼠标事件 和 键盘事件。掌握这些核心事件，是你构建复杂交互应用（如拖拽、游戏、富文本编辑器）的基石。
一、Window 事件：掌控全局的生命周期
Window 事件主要关注浏览器窗口本身的状态变化，包括页面的加载、卸载、尺寸调整以及滚动等。它们是全局性的，通常绑定在 window 对象上。

1. 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 来优化性能。
二、鼠标事件：精细化的交互控制
鼠标事件是用户与界面交互最直接的方式。虽然触摸屏普及，但在桌面端开发中，鼠标事件依然是核心。

1. 基础点击系列
   click：按下并松开同一个按键（通常是左键）。这是最常用的事件。
   dblclick：连续两次快速点击。
   注意：dblclick 触发前通常会先触发两次 click，设计逻辑时需避免冲突。
2. 按下与抬起
   mousedown：鼠标按键被按下的瞬间触发。
   mouseup：鼠标按键被松开的瞬间触发。
   实战技巧：自定义拖拽功能通常从 mousedown 开始监听，在 mousemove 中移动，在 mouseup 中结束。
3. 移动与悬停
   mousemove：鼠标在元素内部移动时持续触发。
   注意：频率极高，务必做节流处理。
   mouseover / mouseout：
   mouseover：鼠标移入元素或其子元素时触发。
   mouseout：鼠标移出元素或其子元素时触发。
   痛点：这两个事件具有冒泡特性。如果父元素绑定了 mouseover，当鼠标移入其内部的子元素时，父元素的事件也会被触发（因为鼠标相对于子元素也是“移入”）。
   💡 进阶推荐：mouseenter 与 mouseleave
   虽然图中未列出，但实际开发中强烈推荐使用这两个事件来替代 mouseover/mouseout。它们不冒泡，只有鼠标真正穿过边界进入该元素时才触发，逻辑更清晰。
   三、键盘事件：捕捉用户的输入意图
   键盘事件对于表单填写、快捷键操作（如 Ctrl+S 保存）以及网页游戏至关重要。
4. keydown vs keyup
   keydown：按键被按下时触发。如果按住不放，会连续触发（类似打字机效果）。
   用途：检测功能键（Shift, Ctrl, Alt）、方向键、游戏控制。
   keyup：按键被松开时触发。
   用途：确认用户完成了某个组合键操作，或停止游戏中的角色移动。
5. keypress（已废弃/不推荐）
   定义：当按下并产生字符值的键时触发。
   现状：该事件已被标准废弃。因为它无法识别非字符键（如 Backspace, Delete, 箭头键），且在不同浏览器表现不一致。
   替代方案：请使用 keydown 配合 event.key 属性来判断用户输入了什么字符。
6. 关键属性 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 修饰符）。理解底层的原生机制，能让你在使用框架时更加游刃有余，也能更好地排查疑难杂症。