The fullscreenchange
event is fired immediately after the browser switches into or out of full-screen mode.
Bubbles | Yes |
---|---|
Cancelable | No |
Interface | Event |
Event handler property | onfullscreenchange |
The event is sent to the Element
that is transitioning into or out of full-screen mode, and this event then bubbles up to the Document
.
To find out whether the Element
is entering or exiting full-screen mode, check the value of Document.fullscreenElement
: if this value is null
then the element is exiting full-screen mode, otherwise it is entering full-screen mode.
Examples
In this example, a handler for the fullscreenchange
event is added to the Document
.
document.addEventListener('fullscreenchange', (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) {
console.log(`Element: ${document.fullscreenElement.id} entered full-screen mode.`);
} else {
console.log('Leaving full-screen mode.');
}
});
See Element: fullscreenchange event for another example.
Specifications
Specification | Status |
---|---|
Fullscreen API | Living Standard |
Browser compatibility
BCD tables only load in the browser