JavaScript 中 BOM 怎么监听浏览器窗口的获得与失去焦点-js教程-PHP中文网

javascript中通过window对象的focus和blur事件监听浏览器窗口焦点变化，推荐使用addeventlistener绑定以支持多监听器和便于解绑，事件仅响应窗口级焦点切换而非元素级操作。

javascript 中 bom 怎么监听浏览器窗口的获得与失去焦点

JavaScript 中通过 BOM 的 window 对象监听浏览器窗口的获得与失去焦点，主要使用 onfocus 和 onblur 事件。这两个事件触发时机明确、兼容性好，无需额外依赖，直接在全局作用域操作即可。

窗口焦点事件的基本用法

窗口级焦点事件绑定在 window 对象上，不是某个具体元素：

onfocus：当浏览器标签页被用户切换回来、或窗口从后台激活时触发（即页面“获得焦点”）
onblur：当用户切换到其他标签页、最小化窗口、或点击地址栏等导致当前页面“失去焦点”时触发

示例代码：

window.onfocus = function() {
  console.log('页面已获得焦点');
};

window.onblur = function() {
  console.log('页面已失去焦点');
};

推荐使用 addEventListener 绑定

相比直接赋值 onfocus/onblur，更推荐用 addEventListener，原因包括：

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

支持为同一事件添加多个监听器，不会相互覆盖
便于后期用 removeEventListener 移除，避免内存泄漏
符合现代事件处理规范，结构更清晰

写法示例：

const handleFocus = () => console.log('窗口获得焦点');
const handleBlur = () => console.log('窗口失去焦点');

window.addEventListener('focus', handleFocus);
window.addEventListener('blur', handleBlur);

// 如需解绑（例如组件卸载时）
// window.removeEventListener('focus', handleFocus);
// window.removeEventListener('blur', handleBlur);