是否有窗口获取焦点的浏览器事件？

是的，浏览器提供了多个与窗口焦点相关的事件，用于检测用户是否切换了当前页面的焦点状态。以下是相关的基础概念、事件类型、应用场景及示例代码：

1. 基础概念

窗口焦点事件用于监听浏览器标签页或窗口是否获得/失去焦点，常用于优化资源使用（如暂停视频播放）、统计用户活跃度或安全验证（如检测页面是否被隐藏）。

2. 核心事件类型

（1）focus 和 blur

• focus：当窗口或元素获得焦点时触发（如用户切换回当前标签页）。
• blur：当窗口或元素失去焦点时触发（如用户切换到其他标签页）。
• 特点：直接绑定到 window 对象，兼容性好。

（2）visibilitychange

• 触发条件：当页面可见性发生变化时（如切换标签页、最小化浏览器）。
• 依赖属性：需结合 document.visibilityState（值为 "visible" 或 "hidden"）。
• 优势：更精确，能区分页面是否被隐藏。

3. 应用场景

• 资源优化：页面隐藏时暂停视频、动画或轮询请求。
• 用户行为统计：记录页面活跃时长。
• 安全场景：检测页面是否被后台运行（如银行页面自动锁定）。

4. 示例代码

（1）focus 和 blur 示例

window.addEventListener('focus', () => {
  console.log('窗口获得焦点');
  // 恢复操作（如播放视频）
});

window.addEventListener('blur', () => {
  console.log('窗口失去焦点');
  // 暂停操作（如停止动画）
});

（2）visibilitychange 示例

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    console.log('页面可见');
  } else {
    console.log('页面隐藏');
  }
});

5. 常见问题与解决

问题：事件未触发

• 原因：可能因浏览器兼容性或事件绑定错误。
• 解决：
  • 检查事件是否绑定到 window 或 document。
  • 使用 console.log 调试或尝试 pageshow/pagehide 事件作为补充。

问题：移动端兼容性

• 注意：部分移动浏览器可能对 blur 事件支持不完善，建议优先使用 visibilitychange。

6. 兼容性

• focus/blur：所有主流浏览器支持。
• visibilitychange：IE10+ 及现代浏览器支持（需前缀处理旧版浏览器）。

通过合理选择事件类型，可以高效实现焦点相关的交互逻辑。