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.

General info

Specification
Fullscreen
Interface
Event
Bubbles
Yes
Cancelable
No
Target
Element and Document
Default Action
None

Properties

Property Type Description
target Read only EventTarget The event target (the topmost target in the DOM tree).
type Read only DOMString The type of event.
bubbles Read only Boolean Whether the event normally bubbles or not.
cancelable Read only Boolean Whether the event is cancelable or not.

Example

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

document.addEventListener("fullscreenchange", function(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 document.fullscreenElement; if it's null, the document isn't in full-screen mode. Otherwise, it indicates which element is being presented full-screen.

See also

Document Tags and Contributors

Last updated by: Sheppy,