上周用笔记本赶项目，开着在线文档、设计图和调试工具，突然弹出 "电量仅剩 8%" 的提示 ------ 手忙脚乱保存文件时我就想：要是网页能提前感知电池状态，早点提醒我多好？后来才发现，浏览器早就藏了个 "电池管家"：Battery API，尤其是它的事件监听功能，能实时捕捉电量变化，可 90% 的开发者居然没真正用起来！
今天咱们就掰开揉碎讲透 Battery API events，从基础到实战，看完你就能让网页 "懂" 电池，既不浪费电，又能提升用户体验。
一、先搞懂：Battery API events 到底是啥？
简单说，Battery API 是浏览器提供的一套接口 ，能让网页获取设备（手机、笔记本等）的电池状态；而Battery API events（电池事件） 就是 "状态变了就通知你" 的触发器 ------ 比如插电 / 拔电、电量百分比下降、剩余使用时间变化时，事件就会触发，网页就能及时做出反应。
它的核心作用就一个：让网页从 "盲目运行" 变成 "按需调整"，比如电量低时自动降低视频画质、保存文档，插电时开启高清模式，再也不用等系统弹窗才慌神。
二、必掌握的 4 个核心事件 + 4 个关键属性
要用好电池事件，得先摸清 "事件触发时能拿到什么数据"------ 这就离不开电池对象（BatteryManager）的 4 个核心属性，以及对应的 4 个事件。
1. 先获取电池对象：唯一方法 getBattery ()
所有操作都得从 "获取电池对象" 开始，这个方法是异步的，返回 Promise，用法超简单：
ini
// 获取电池对象（兼容所有支持的浏览器）
navigator.getBattery().then(battery => {
  // 这里的battery就是BatteryManager对象，包含所有电池状态
  console.log("当前电池状态已获取：", battery);
}).catch(err => {
  // 处理异常：比如台式机没电池、浏览器不支持
  console.log("获取电池状态失败：", err);
});2. 4 个关键属性：事件触发时要读的数据
这 4 个属性是事件的 "数据来源"，每个属性都对应一个事件，先记牢它们的含义：
| 属性名 | 类型 | 含义 | 例子 |
|---|---|---|---|
charging |
布尔值 | 设备是否正在充电（true = 充电中，false = 未充电） | battery.charging → true |
chargingTime |
数字 | 充满电还需多少秒（未充电时为 Infinity，快满时可能为 0） | battery.chargingTime → 1800（30 分钟） |
dischargingTime |
数字 | 未充电时，剩余电量还能使用多少秒（充电时为 Infinity） | battery.dischargingTime → 3600（1 小时） |
level |
数字（0-1） | 电量百分比（0 = 没电，1 = 满电），乘以 100 就是我们看到的百分比 | battery.level → 0.35（35%） |
比如你想知道 "当前电量 + 是否充电"，直接读这两个属性就行，不用等事件触发 ------ 事件的作用是 "状态变了通知你"。
3. 4 个核心事件：状态变了就触发
每个事件对应一个属性的变化，触发时就能拿到最新的属性值，实战中用得最多的就是这 4 个：
（1）chargingchange：充电状态变了（插电 / 拔电）
触发场景：比如笔记本从插电拔成电池供电，或手机插上充电器时。
实战例子：插电时提示开启高清模式，拔电时提醒省点用：
less
navigator.getBattery().then(battery => {
  // 初始状态判断
  if (battery.charging) {
  console.log("当前正在充电，可开启高清视频");
  }
  // 监听充电状态变化
  battery.addEventListener('chargingchange', () => {
  if (battery.charging) {
  alert("已连接电源！建议开启文档自动同步和视频高清模式\~");
  } else {
  alert("已断开电源，已为你切换到省电模式（降低图片加载质量）");
  }
  });
});（2）levelchange：电量百分比变了
触发场景：电量从 35% 降到 34%、从 10% 升到 11% 时（浏览器会根据设备精度触发，不是每 1% 都触发）。
实战注意：这个事件可能频繁触发，建议加 "防抖" 避免多次执行代码：
less
navigator.getBattery().then(battery => {
  let debounceTimer; // 防抖计时器
  // 监听电量变化（加防抖）
  battery.addEventListener('levelchange', () => {
  clearTimeout(debounceTimer);
  debounceTimer = setTimeout(() => {
  const percent = Math.round(battery.level \* 100);
  console.log(\`当前电量：\${percent}%\`);
  // 电量低于20%提醒保存工作
  if (percent < 20 && !battery.charging) {
  alert(\`电量仅剩\${percent}%！请尽快保存当前文档和代码\~\`);
  }
  }, 1000); // 1秒内只执行一次
  });
});（3）chargingtimechange：充满电剩余时间变了
触发场景：比如充电时，剩余充满时间从 30 分钟变成 25 分钟（设备计算更新时）。
实战例子：显示实时充电进度：
ini
navigator.getBattery().then(battery => {
  battery.addEventListener('chargingtimechange', () => {
  if (battery.charging) {
  const hours = Math.floor(battery.chargingTime / 3600);
  const minutes = Math.floor((battery.chargingTime % 3600) / 60);
  console.log(\`预计\${hours}小时\${minutes}分钟后充满\`);
  // 渲染到页面：\<div>充电剩余：\${hours}h\${minutes}m\</div>
  }
  });
});（4）dischargingtimechange：未充电时，剩余使用时间变了
触发场景：未充电时，剩余使用时间从 1 小时变成 50 分钟（比如打开了高耗电应用）。
实战例子：低电量时提示关闭高耗电功能：
ini
navigator.getBattery().then(battery => {
  battery.addEventListener('dischargingtimechange', () => {
  if (!battery.charging) {
  const hours = Math.floor(battery.dischargingTime / 3600);
  const minutes = Math.floor((battery.dischargingTime % 3600) / 60);
  // 剩余时间少于30分钟，提示关闭视频/游戏
  if (battery.dischargingTime < 1800) {
  alert(\`剩余使用时间仅\${minutes}分钟，建议关闭视频、游戏等高耗电功能\`);
  }
  }
  });
});三、3 个实用技巧：让你少踩坑
1. 必须做 "特性检测"，避免浏览器报错
不是所有浏览器都支持 Battery API（比如旧版 Safari），也不是所有设备都有电池（比如台式机），所以第一步一定要判断：
javascript
if ('getBattery' in navigator) {
  // 支持，正常执行
  navigator.getBattery().then(battery => { /\* ... \*/ });
} else {
  // 不支持，降级处理（比如不做电池相关逻辑，或提示用户）
  console.log("抱歉，你的浏览器不支持电池状态检测，建议升级浏览器\~");
}2. 别依赖 "精确时间"，参考即可
chargingTime和dischargingTime是设备估算的时间，不是 100% 准确 ------ 比如充电快满时，chargingTime可能突然变成 0；打开高耗电应用时，dischargingTime会骤降。所以实战中别用 "精确到秒" 的逻辑，比如 "剩余 10 分钟时自动关机"，而是用 "大概范围"（比如低于 30 分钟提醒）。
3. 不用时移除事件监听，避免内存泄漏
如果你的页面是单页应用（SPA），或者用户可能频繁切换页面，一定要在 "页面卸载" 或 "组件销毁" 时移除事件监听，不然会占内存：
javascript
navigator.getBattery().then(battery => {
  // 定义监听函数（单独提出来，方便移除）
  function handleLevelChange() { /\* ... \*/ }
  // 添加监听
  battery.addEventListener('levelchange', handleLevelChange);
  // 页面卸载时移除监听
  window.addEventListener('beforeunload', () => {
  battery.removeEventListener('levelchange', handleLevelChange);
  });
});四、5 个高频应用场景：用了就提升体验
别觉得 Battery API 没用，这些场景用起来，用户会明显觉得 "这个网页很贴心"：
1. 在线文档 / 代码编辑器：低电量自动保存
比如 Notion、CodeSandbox，当电量低于 20% 且未充电时，自动触发 "强制保存"，并提示用户 "电量不足，已为你保存当前内容"------ 避免突然关机丢数据。
2. 视频 / 直播网站：根据电量调整画质
充电时默认高清（1080P），未充电且电量低于 50% 时，提示 "当前电量较低，是否切换到 720P 省点模式？"；低于 20% 时自动切画质，同时暂停自动播放。
3. 在线游戏：电量不足提醒保存进度
手游网页版（比如云游戏）中，当电量低于 30% 且未充电时，弹出 "电量不足，建议先保存游戏进度，避免中途中断"，让用户有心理准备。
4. PWA 应用：根据电量调整同步频率
比如离线笔记 PWA，充电时实时同步数据；未充电且电量低于 40% 时，改为 "每 10 分钟同步一次"；低于 15% 时暂停同步，只在用户手动保存时同步 ------ 减少后台耗电。
5. 设备管理工具：实时显示电池状态
比如网页版 "设备监控工具"，可以实时展示 "当前电量 35%，未充电，预计剩余使用 1 小时 20 分钟"，甚至能记录 "过去 2 小时电量消耗曲线"（基于 levelchange 事件数据）。
五、注意事项：别踩这些坑
最后提醒 3 个容易忽略的点，避免掉坑：
-
HTTPS 环境要求 ：大部分浏览器（Chrome、Firefox）要求 Battery API 必须在 HTTPS 环境下使用（本地开发
localhost除外），HTTP 环境下会报错 ------ 部署时一定要注意。 -
隐私限制：部分浏览器（比如 Safari）会限制 "频繁获取电池状态"，避免泄露用户隐私（比如通过电池消耗规律判断用户行为），所以别每秒都读属性，依赖事件触发即可。
-
设备兼容性：截至 2025 年，主流浏览器（Chrome 38+、Firefox 43+、Safari 16.4+）都支持，但旧版浏览器（比如 IE、Safari 16 以下）不支持 ------ 做好降级处理，别让代码崩了。
总结
其实 Battery API events 一点都不难，核心就是 "获取电池对象 → 监听事件 → 读属性做反应"，但能解决很多 "用户痛点"。下次做项目时，不妨在上述场景里试试，你会发现：原来网页也能这么 "懂" 设备，既不浪费电，又能让用户觉得贴心。
你们在项目里用过 Battery API 吗？遇到过什么奇怪的兼容性问题？欢迎评论区聊聊，一起避坑～
（注：文档部分内容可能由 AI 生成）