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.