The fullscreenchange event is fired immediately before the browser switches into or out of full-screen mode. Two fullscreenchange events are fired; the first is sent to the Element which is transitioning into or out of full-screen mode, and the second is sent to the Document which owns that element.

Bubbles Yes
Cancelable No
Interface Event
Event handler property onfullscreenchange

Examples

In this example, a handler for the fullscreenchange event is added to the Document.

document.addEventListener("fullscreenchange", (event) => {
  if (document.fullscreenElement) {
    // The browser is in full-screen mode, with document.fullscreenElement
    // being the element presented full-screen.
  }
});

Since the fullscreenchange event doesn't include information about whether the change was into or out of full-screen mode, we check the value of DocumentOrShadowRoot.fullscreenElement; if it's null, the document isn't in full-screen mode. Otherwise, it indicates which element is being presented full-screen.

Specifications

Specification Status
Fullscreen API Living Standard

Browser compatibility

No compatibility data found. Please contribute data for "api.Document.fullscreenchange_event" (depth: 1) to the MDN compatibility data repository.

See also

Document Tags and Contributors

Last updated by: jeremiahlee,