监听 fullscreenchange 事件需绑定在 document 上，通过 addEventListener 注册；判断全屏状态须检查 document.fullscreenElement 是否为 null；F11 全屏不触发该事件，需结合 resize 等辅助判断。
监听 fullscreenchange 事件是掌握全屏状态变化的核心手段，它不主动触发，只在用户点击进入/退出全屏、按 F11 或调用 API 后自动触发。关键在于正确绑定、及时响应，并配合状态判断做 UI 或逻辑更新。
如何正确监听 fullscreenchange 事件
该事件始终绑定在 document 对象上，不能绑定到某个元素。推荐使用标准的 addEventListener 方式：
- 用
document.addEventListener('fullscreenchange', handler)注册监听器 - 避免使用过时的
document.onfullscreenchange = handler写法（兼容性差且不易移除） - 建议在页面初始化阶段就绑定，确保不会漏掉首次状态变化
如何判断当前是否处于全屏状态
不能仅靠事件名推断“进”或“出”，必须读取 document.fullscreenElement：
- 值为
null→ 当前未全屏（包括刚退出、从未进入、或被系统强制退出） - 值为一个 DOM 元素（如
<div class="player">）→ 该元素正处在全屏中 - 注意：不要用
document.webkitIsFullScreen等旧属性，现代浏览器统一支持fullscreenElement
常见控制场景与对应写法
事件监听本身只是“通知”，后续控制需结合业务逻辑：
-
切换按钮文字：检测
fullscreenElement后，把“进入全屏”改成“退出全屏” - 显示/隐藏控件栏：全屏时显示播放进度条、音量条；退出后自动收起
- 暂停视频/动画：某些场景下退出全屏时需暂停媒体以节省资源
-
防止重复调用：在按钮点击处理函数中先检查
fullscreenElement，再决定调用requestFullscreen()还是exitFullscreen()
注意事项与兼容补充
这个事件本身兼容性很好（Chrome 71+、Firefox 64+、Safari 12.1+、Edge 79+），但要注意：
- F11 触发的浏览器级全屏不会触发该事件（因为不是通过 Fullscreen API），此时需结合
resize+screen.height === window.innerHeight辅助判断 - 如果 iframe 中的内容想全屏，父页面需添加
allowfullscreen属性，否则fullscreenEnabled为false，事件也不会触发 - 监听器函数内尽量避免耗时操作，避免阻塞渲染或影响退出体验
