文件：fullscreenchange 事件

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

fullscreenchange 事件在瀏覽器進入或退出全屏模式後立即觸發。

該事件傳送給正在進入或退出全屏模式的 Element，然後該事件會冒泡到 Document。

要確定 Element 是進入還是退出全屏模式，請檢查 Document.fullscreenElement 的值：如果此值為 null，則元素正在退出全屏模式，否則表示元素正在進入全屏模式。

此事件不可取消。

語法

在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。

addEventListener("fullscreenchange", (event) => { })

onfullscreenchange = (event) => { }

事件型別

一個通用的 Event。

示例

記錄 `fullscreenchange` 事件

在此示例中，將 fullscreenchange 事件的事件處理程式新增到 Document。

如果使用者點選“切換全屏模式”按鈕，click 事件處理程式將切換 div 的全屏模式。如果 document.fullscreenElement 有值，它將退出全屏模式。如果不是，div 將被置於全屏模式。

請記住，在處理 fullscreenchange 事件時，元素的*狀態*已經發生了變化。因此，如果更改為全屏模式，document.fullscreenElement 將指向當前處於全屏模式的元素。另一方面，如果 document.fullscreenElement 為 null，則表示已取消全屏模式。

這意味著對於示例程式碼而言，如果一個元素當前處於全屏模式，fullscreenchange 事件處理程式會將全屏元素的 id 記錄到控制檯。如果 document.fullscreenElement 為 null，則程式碼會記錄一條訊息，表明更改為離開全屏模式。

HTML

html

<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
  <pre id="logger"></pre>
</div>

CSS

css

* {
  box-sizing: border-box;
}

#fullscreen-div {
  height: 150px;
  padding: 1rem;
  background-color: pink;
}

#logger {
  height: 80px;
  padding: 0 0.5rem;
  background-color: white;
  overflow: scroll;
}

JavaScript

const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");

function log(message) {
  logger.textContent = `${logger.textContent}\n${message}`;
}

function fullscreenchangeHandler(event) {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If there isn't one,
  // the value of the property is null.
  if (document.fullscreenElement) {
    log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    log("Leaving fullscreen mode.");
  }
}

document.addEventListener("fullscreenchange", fullscreenchangeHandler);

// When the toggle button is clicked, enter/exit fullscreen
document.getElementById("toggle-fullscreen").addEventListener("click", () => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    fullScreenElement.requestFullscreen();
  }
});