fullscreenchange Event

❮ Previous Events Reference Next ❯

Example

Display some text when the page is viewed in fullscreen mode:

document.addEventListener("fullscreenchange", function() {
output.innerHTML = "fullscreenchange event fired!";
});

Try it Yourself »

Description

The fullscreenchange event occurs when an element is viewed in fullscreen mode.

Note: This event requires specific prefixes to work in different browsers (see Browser Support below).

Tip: Use the element.requestFullscreen() method to view an element in fullscreen mode.

Tip: Use the element.exitFullscreen() method to cancel fullscreen mode.

Browser Support

The numbers in the table specify the first browser version that fully supports the event. Note: Each browser requires a specific prefix (see parentheses):

Event
fullscreenchange	45.0 (webkit)	11.0 (ms)	47.0 (moz)	5.1 (webkit)	15.0 (webkit)

Example

Using prefixes for cross-browser code:

/* Standard syntax */
document.addEventListener("fullscreenchange", function() {
...
});

/* Firefox */
document.addEventListener("mozfullscreenchange", function() {
...
});

/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function() {
...
});

/* IE / Edge */
document.addEventListener("msfullscreenchange", function() {
...
});

Try it Yourself »

Syntax

In HTML:

<element onfullscreenchange="myScript">

In JavaScript:

object.onfullscreenchange = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("fullscreenchange", myScript);

Try it Yourself »

Technical Details

Bubbles:	Yes
Cancelable:	No
Event type:	Event
HTML tags:	ALL HTML elements

❮ Previous Events Reference Next ❯