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 DocumentOrShadowRoot.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
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fullscreenchange event | Chrome Full support 45 | Edge Full support 12 | Firefox
Full support
64
| IE
Full support
11
| Opera Full support 32 | Safari ? | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android
Full support
64
| Opera Android Full support 32 | Safari iOS ? | Samsung Internet Android Full support 5.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.