JavaScript Element fullscreenchange Event

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

Definition

In JavaScript, the Element fullscreenchange event fires immediately after that element switches into or out of fullscreen mode (MDN). It is sent to the transitioning element, then bubbles 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
el.addEventListener("fullscreenchange", fn)
CallWhat it does
el.addEventListener("fullscreenchange", fn)Primary signature.

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

Library declarations
JavaScript
el.addEventListener("fullscreenchange", fn)

Parameters

ParameterDescription
fullscreenElementRequired. Current fullscreen node, or null

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen on the Element

MDN style: attach to the panel; after the change, read fullscreenElement.

JavaScript
const el = document.getElementById("fullscreen-div");

function fullscreenchangeHandler() {
  if (document.fullscreenElement) {
    console.log(
      "Element:",
      document.fullscreenElement.id,
      "entered fullscreen mode."
    );
  } else {
    console.log("Leaving fullscreen mode.");
  }
}

el.addEventListener("fullscreenchange", fullscreenchangeHandler);
// or: el.onfullscreenchange = fullscreenchangeHandler;
console.log("Listener attached");
Try It Yourself

How It Works

  1. Pick the element. Listen on the node that will enter fullscreen.
  2. Define a handler. It runs after enter or exit has already happened.
  3. Check fullscreenElement. Non-null → entered; null → exited (MDN).
  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 el = document.getElementById("fullscreen-div");
const btn = document.getElementById("toggle-fullscreen");

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

btn.addEventListener("click", async () => {
  try {
    if (document.fullscreenElement) {
      await document.exitFullscreen();
    } else {
      await el.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

Element 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

Element fullscreenchange

Fires on the element after enter/exit. 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 an Element switches into or out of fullscreen mode. The event is sent to that Element, then bubbles up to Document (MDN).
No. MDN does not mark Element 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 on the element (or document). Failures often happen without a user gesture, in unsupported browsers, denied iframes, or when the browser refuses permission.

Next: fullscreenerror

Learn the Element 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 Element focusout Event JavaScript Element fullscreenerror Event