fullscreenchange Event

DOM Events Event Object

Definition and Usage

The 'fullscreenchange' event occurs when an element is viewed in full-screen mode.

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

Hint:Please use element.requestFullscreen() Method to view the element in full-screen mode.

Hint:Please use element.exitFullscreen() Method to cancel full-screen mode.

Example

Display some text when viewing the page in full-screen mode:

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

Try It Yourself

Syntax

In HTML:

<element onfullscreenchange="myScript">

In JavaScript:

object.onfullscreenchange = function(){myScript});

In JavaScript, use the addEventListener() method:

object.addEventListener("fullscreenchange", myScript);

Try It Yourself

Note:Internet Explorer 8 and earlier versions do not support addEventListener() method.

Technical Details

Bubbling: Supported
Cancelable: Not supported
Event type: Event
Supported HTML tags: All HTML elements

Browser Support

The numbers in the table indicate the first browser version to fully support this event. Note: Each browser requires a specific prefix (see inside the parentheses):

Event Chrome IE Firefox Safari Opera
fullscreenchange 45.0 (webkit) 11.0 (ms) 47.0 (moz) 5.1 (webkit) 15.0 (webkit)

Example

Prefixes for cross-browser code usage:

/* 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

DOM Events Event Object