JavaScript Document fullscreenchange Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word FULLSCREENCHANGE

Definition

In JavaScript, the Document fullscreenchange event fires immediately after the browser switches into or out of fullscreen mode (MDN). It is sent to the transitioning Element, then bubbles up to Document.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for fullscreenchange. Start with this line.

JavaScript
addEventListener("fullscreenchange", fn)
CallWhat it does
addEventListener("fullscreenchange", fn)Primary signature.

Built into the browser. Listen with document.addEventListener("fullscreenchange", …) — no import required.

Library declarations
JavaScript
addEventListener("fullscreenchange", fn)

Parameters

ParameterDescription
Listener on documentRequired. Catches bubbled enter/exit changes
fullscreenElementRequired. Current fullscreen node, or null

Return Value

Return ValueDescription
*Fires as a Document event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen on document

MDN style: after the change, read fullscreenElement to know enter vs exit.

JavaScript
function onFullscreenChange() {
  if (document.fullscreenElement) {
    console.log("Entered:", document.fullscreenElement.id || "(no id)");
  } else {
    console.log("Leaving fullscreen mode.");
  }
}

document.addEventListener("fullscreenchange", onFullscreenChange);
console.log("Listener attached");
Try It Yourself

How It Works

  1. Define a handler. It runs after enter or exit has already happened.
  2. Check fullscreenElement. Non-null → entered; null → exited (MDN).
  3. Listen on document. Bubbling means one listener catches every change.
  4. Log for learning. In real apps, update button labels / CSS classes here.

Example 2 — Toggle Fullscreen

Enter with requestFullscreen(), exit with exitFullscreen() — usually from a click.

JavaScript
const panel = document.getElementById("panel");
const btn = document.getElementById("toggle");

document.addEventListener("fullscreenchange", () => {
  console.log("fullscreenElement:", document.fullscreenElement);
});

btn.addEventListener("click", async () => {
  try {
    if (document.fullscreenElement) {
      await document.exitFullscreen();
    } else {
      await panel.requestFullscreen();
    }
  } catch (err) {
    console.log("Fullscreen failed:", err.name);
  }
});
Try It Yourself

How It Works

  1. Pick a panel. That element becomes the fullscreen target.
  2. On click. If already fullscreen, exit; otherwise request enter.
  3. Await promises. Both methods return Promises — catch failures.
  4. Update from the event. fullscreenchange confirms the new state.

Example 3 — Feature Detection

Check support before offering a fullscreen button.

JavaScript
const ok =
  document.fullscreenEnabled === true &&
  typeof document.documentElement.requestFullscreen === "function";

console.log("fullscreenEnabled:", document.fullscreenEnabled);
console.log("Fullscreen API usable:", ok);

if (!ok) {
  console.log("Hide or disable the fullscreen control");
}
Try It Yourself

How It Works

  1. Read fullscreenEnabled. Policy / embedding may disable fullscreen.
  2. Check the method. Confirm requestFullscreen exists on an element.
  3. Combine both. Only then treat the API as usable.
  4. Degrade gracefully. Hide the control when support is missing.
Compatibility

Browser Support

Document fullscreenchange is part of the Fullscreen API. MDN marks it Limited availability (not Baseline). It is not Deprecated, Experimental, or Non-standard — still feature-detect in production.

✓ Limited availability · Not Baseline

Document fullscreenchange

Fires after enter/exit fullscreen. Read document.fullscreenElement to know the direction.

Limited Feature-detect required
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
fullscreenchange Limited

Bottom line: Works in many modern browsers, but support and policy vary (especially in iframes). Always check document.fullscreenEnabled and handle fullscreenerror.

Frequently Asked Questions

It fires immediately after the browser switches into or out of fullscreen mode. The event is sent to the Element that is transitioning, then bubbles up to the Document (MDN).
No. MDN does not mark Document fullscreenchange as Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline), so feature-detect and test the browsers you care about.
After the event fires, check document.fullscreenElement. If it is non-null, an element is in fullscreen. If it is null, fullscreen mode was exited (MDN).
No. MDN states this event is not cancelable. It reports a change that already happened.
Call element.requestFullscreen() to enter (usually from a user gesture). Call document.exitFullscreen() to exit — exitFullscreen is only available on Document. Listen for fullscreenchange to update your UI.
Listen for the fullscreenerror event. Failures often happen without a user gesture, in unsupported browsers, denied iframes, or when the browser refuses permission.

Next: fullscreenerror

Learn the Document event that fires when a fullscreen request fails.

fullscreenerror tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Document DOMContentLoaded Event JavaScript Document fullscreenerror Event