此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
Element：fullscreenchange 事件
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
fullscreenchange 事件会在浏览器进入或退出全屏模式后立即触发。
该事件被发送到正在进入或退出全屏模式的Element。
要确定Element 是进入还是退出全屏模式，请检查Document.fullscreenElement 的值：如果此值为null，则表示该元素正在退出全屏模式，否则表示该元素正在进入全屏模式。
此事件不能被取消。
语法
在类似于addEventListener() 之类的方法中使用事件名称，或设置事件处理器属性。
addEventListener("fullscreenchange", (event) => {});onfullscreenchange = (event) => {};事件类型
通用的Event。
示例
在此示例中，向 ID 为fullscreen-div 的元素添加了fullscreenchange 事件处理器。
如果用户单击“切换全屏模式”按钮，click 处理器将切换div 的全屏模式。如果document.fullscreenElement 具有值，则会退出全屏模式。否则，div 将被置于全屏模式。
请记住，在处理fullscreenchange 事件时，元素的状态已经发生了变化。因此，如果更改是进入全屏模式，document.fullscreenElement 将指向现在处于全屏模式的元素。另一方面，如果document.fullscreenElement 为null，则全屏模式已被取消。
对于示例代码，这意味着，如果元素当前处于全屏模式，则fullscreenchange 处理器在控制台中打印全屏元素的id。如果document.fullscreenElement 为null，则代码记录消息表示更改是退出全屏模式。
HTML
<h1>fullscreenchange 事件示例</h1><div> <button>切换全屏模式</button></div>JavaScript
function fullscreenchangeHandler(event) { // 如果有元素处于全屏模式，则 document.fullscreenElement 将指向该元素。如果没有元素处于全屏模式，则该属性的值为 null。 if (document.fullscreenElement) { console.log(`元素：${document.fullscreenElement.id} 进入全屏模式。`); } else { console.log("退出全屏模式。"); }}const el = document.getElementById("fullscreen-div");el.addEventListener("fullscreenchange", fullscreenchangeHandler);// 或el.onfullscreenchange = fullscreenchangeHandler;// 在切换按钮被点击时，将会进入或退出全屏模式document .getElementById("toggle-fullscreen") .addEventListener("click", (event) => { if (document.fullscreenElement) { // exitFullscreen 方法只能在 Document 对象上使用。 document.exitFullscreen(); } else { el.requestFullscreen(); } });规范
| Specification |
|---|
| Fullscreen API # handler-document-onfullscreenchange |