Element: fullscreenchange event

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thefullscreenchange event is fired immediately after anElement switches into or out of fullscreen mode.

This event is sent to theElement which is transitioning into or out of fullscreen mode.

To find out whether theElement is entering or exiting fullscreen mode, check the value ofDocument.fullscreenElement: if this value isnull then the element is exiting fullscreen mode, otherwise it is entering fullscreen mode.

This event is not cancelable.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("fullscreenchange", (event) => { })onfullscreenchange = (event) => { }

Event type

A genericEvent.

Examples

In this example, a handler for thefullscreenchange event is added to the element whose ID isfullscreen-div.

If the user clicks on the "Toggle Fullscreen Mode" button, theclick handler will toggle fullscreen mode for thediv. Ifdocument.fullscreenElement has a value it will exit fullscreen mode. If not, the div will be placed into fullscreen mode.

Remember that by the time thefullscreenchange event is handled, the status of the element has already changed. So if the change is to fullscreen mode,document.fullscreenElement will point to the element that is now in fullscreen mode. On the other hand, ifdocument.fullscreenElement isnull, fullscreen mode has been canceled.

What that means to the example code is that, if an element is currently in fullscreen mode, thefullscreenchange handler logs theid of the fullscreen element to the console. Ifdocument.fullscreenElement isnull, the code logs a message that the change is to leave fullscreen mode.

HTML

html

<h1>fullscreenchange event example</h1><div>  <button>Toggle Fullscreen Mode</button></div>

JavaScript

function fullscreenchangeHandler(event) {  // document.fullscreenElement will point to the element that  // is in fullscreen mode if there is one. If not, the value  // of the property is null.  if (document.fullscreenElement) {    console.log(      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,    );  } else {    console.log("Leaving fullscreen mode.");  }}const el = document.getElementById("fullscreen-div");el.addEventListener("fullscreenchange", fullscreenchangeHandler);// orel.onfullscreenchange = fullscreenchangeHandler;// When the toggle button is clicked, enter/exit fullscreendocument  .getElementById("toggle-fullscreen")  .addEventListener("click", (event) => {    if (document.fullscreenElement) {      // exitFullscreen is only available on the Document object.      document.exitFullscreen();    } else {      el.requestFullscreen();    }  });