JavaScript Element fullscreenchange Event

Beginner
⏱️ 12 min read
📚 Updated: Jul 2026
🎯 5 Examples
🚀 5 Try-it labs
DOM event
Instance event
JavaScript Element fullscreenchange event tutorial — Fullscreen API enter and exit
Overview

What You’ll Learn

The fullscreenchange event fires right after an element enters or leaves fullscreen. Learn document.fullscreenElement, requestFullscreen / exitFullscreen, onfullscreenchange, error handling, and five try-it labs.

01

Kind

Instance event

02

Type

Event

03

When

Enter or exit fullscreen

04

Handler

onfullscreenchange

05

Check state

document.fullscreenElement

06

Status

Limited availability

Fundamentals

Introduction

Games, video players, and slideshows often need the whole screen. The Fullscreen API lets an element go fullscreen with requestFullscreen(), and leave with document.exitFullscreen().

fullscreenchange is the signal that the transition already happened. Update button labels, CSS classes, or analytics in that handler. MDN marks it as Limited availability (not Baseline)—feature-detect and test.

💡
Beginner tip

Entering fullscreen usually requires a user gesture (click / key). Calling requestFullscreen() from a random timer often fails and may fire fullscreenerror instead.

Concept

Understanding fullscreenchange

An instance event that answers: “Did this element just enter or leave fullscreen?”

  • Fires immediately after the element switches into or out of fullscreen.
  • Does not encode enter vs exit — read document.fullscreenElement.
  • Bubbles toward the document (you can also listen on document).
  • Event type — a plain Event.
  • Handler — onfullscreenchange or addEventListener("fullscreenchange", ...).
  • Limited availability on MDN (not Baseline)—test carefully.
Foundation

📝 Syntax

Use the event name with addEventListener, or set the handler property:

JavaScript
addEventListener("fullscreenchange", (event) => { });

onfullscreenchange = (event) => { };

Event type

A generic Event.

Related Fullscreen API pieces

APIRole
element.requestFullscreen()Ask to enter fullscreen (returns a Promise)
document.exitFullscreen()Leave fullscreen (Document method)
document.fullscreenElementCurrent fullscreen element, or null
fullscreenerrorFires when enter/exit fails
:fullscreenCSS pseudo-class for the fullscreen element
Detect

🔁 Enter vs Exit

By the time your handler runs, the mode has already changed. Use this pattern from MDN:

JavaScript
function fullscreenchangeHandler(event) {
  if (document.fullscreenElement) {
    console.log(
      `Element: ${document.fullscreenElement.id} entered fullscreen mode.`,
    );
  } else {
    console.log("Leaving fullscreen mode.");
  }
}
  • document.fullscreenElement non-null → something is fullscreen.
  • null → no fullscreen element (left / canceled).
Compare

⚖️ Element vs Document listener

Listen onWhen to use
The target ElementYou care about one widget (video box, game canvas)
documentApp-wide UI that must react to any fullscreen change (including Esc)

The event is sent to the transitioning element and then bubbles. Listening on document is often the most reliable place for global chrome updates.

Cheat Sheet

⚡ Quick Reference

GoalCode / note
Listenel.addEventListener("fullscreenchange", fn)
Handler propertyel.onfullscreenchange = fn
Enterel.requestFullscreen() (user gesture)
Exitdocument.exitFullscreen()
Am I fullscreen?Boolean(document.fullscreenElement)
MDN statusLimited availability (not Baseline)
Snapshot

🔍 At a Glance

Four facts to remember about fullscreenchange.

Event type
Event

Plain Event

Means
FS toggled

Enter or exit

State check
fullscreenElement

null = exited

Baseline
no

Limited availability

Hands-On

Examples Gallery

Examples follow MDN Element: fullscreenchange event. Try-it labs need a real browser click—some embedded previews block fullscreen.

📚 Getting Started

MDN-style toggle and the handler property.

Example 1 — Toggle Fullscreen + Log (MDN)

Button toggles fullscreen; fullscreenchange reports enter/exit.

JavaScript
const el = document.getElementById("fs");
const log = document.getElementById("log");

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

el.addEventListener("fullscreenchange", fullscreenchangeHandler);

document.getElementById("toggle-fullscreen").addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    el.requestFullscreen();
  }
});
Try It Yourself

How It Works

exitFullscreen lives on document, not the element. Esc also exits and still fires fullscreenchange.

Example 2 — onfullscreenchange Property

Same idea using the handler property form.

JavaScript
const el = document.getElementById("fs");
const status = document.getElementById("status");

el.onfullscreenchange = () => {
  status.textContent = document.fullscreenElement
    ? "Fullscreen ON"
    : "Fullscreen OFF";
};
Try It Yourself

How It Works

Prefer addEventListener when you need multiple listeners or easy removal.

📈 Detect, Style & Errors

Feature-detect, sync CSS classes, and handle failures.

Example 3 — Feature-Detect Before Calling

Disable the button when Fullscreen API methods are missing.

JavaScript
const btn = document.getElementById("toggle");
const el = document.getElementById("fs");
const note = document.getElementById("note");

const canFs =
  typeof el.requestFullscreen === "function" &&
  typeof document.exitFullscreen === "function";

if (!canFs) {
  btn.disabled = true;
  note.textContent = "Fullscreen API not available in this environment.";
} else {
  note.textContent = "Fullscreen API looks available.";
  btn.addEventListener("click", () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    } else {
      el.requestFullscreen();
    }
  });
}
Try It Yourself

How It Works

Limited availability means some engines or embedded frames may deny fullscreen even when the methods exist—still listen for fullscreenerror.

Example 4 — Sync a CSS Class on Change

Keep a is-fullscreen class in sync for custom chrome.

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

function syncClass() {
  el.classList.toggle("is-fullscreen", Boolean(document.fullscreenElement));
  btn.textContent = document.fullscreenElement ? "Exit fullscreen" : "Enter fullscreen";
}

el.addEventListener("fullscreenchange", syncClass);

btn.addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen();
  } else {
    el.requestFullscreen();
  }
});
Try It Yourself

How It Works

You can also style with the :fullscreen pseudo-class. A class is handy when siblings outside the fullscreen element need to react.

Example 5 — Handle fullscreenerror

Show a friendly message when enter/exit fails.

JavaScript
const el = document.getElementById("fs");
const msg = document.getElementById("msg");

el.addEventListener("fullscreenchange", () => {
  msg.textContent = document.fullscreenElement
    ? "Fullscreen OK"
    : "Windowed mode";
});

el.addEventListener("fullscreenerror", () => {
  msg.textContent = "Could not change fullscreen (permission or environment).";
});

document.getElementById("toggle").addEventListener("click", () => {
  if (document.fullscreenElement) {
    document.exitFullscreen().catch(() => {});
  } else {
    el.requestFullscreen().catch(() => {
      msg.textContent = "requestFullscreen() rejected.";
    });
  }
});
Try It Yourself

How It Works

Handle both the event and the Promise rejection from requestFullscreen() so users always get feedback.

Applications

🚀 Common Use Cases

  • Video / slideshow “fullscreen” buttons that stay in sync with Esc.
  • Games that pause or resize when leaving fullscreen.
  • Updating toolbar labels (“Enter” vs “Exit”).
  • Analytics for how often users enter immersive mode.
  • Teaching the Fullscreen API alongside fullscreenerror.
Under the Hood

🔧 How It Works

1

User gesture triggers request

element.requestFullscreen() or user presses Esc to leave.

Input
2

Browser applies the mode change

Element fills the screen, or returns to windowed layout.

Browser
3

fullscreenchange fires

Sent to the element, then bubbles (document listeners work too).

Event
4

Read fullscreenElement

Update UI from the current state—not from a flag in the event.

Important

📝 Notes

  • MDN: Limited availability (not Baseline)—test the browsers you support.
  • Not Deprecated, Experimental, or Non-standard — no status banner required.
  • Enter fullscreen from a user gesture; exit can also happen via Esc.
  • Embedded iframes often need allow="fullscreen".
  • Related learning: focusout, fullscreenerror, addEventListener(), JavaScript hub.
Compatibility

Limited Availability Support

fullscreenchange is marked Limited availability on MDN (not Baseline). Logos use the shared browser-image-sprite.png sprite from this project. Feature-detect requestFullscreen / exitFullscreen, and remember iframes and permissions can still block fullscreen.

✓ Limited availability

Element fullscreenchange

Fullscreen enter/exit signal; confirm support and permissions in your target browsers.

Limited Not Baseline
Google Chrome Supported (check BCD / iframe policy)
Supported
Mozilla Firefox Supported in modern versions
Supported
Apple Safari Supported with platform quirks
Supported
Microsoft Edge Supported · Chromium
Supported
Opera Supported · Modern versions
Supported
Internet Explorer No modern Fullscreen API
No
fullscreenchange Limited

Bottom line: Listen for fullscreenchange, check document.fullscreenElement, and handle fullscreenerror.

Wrap Up

Conclusion

fullscreenchange tells you fullscreen mode already flipped. Drive your UI from document.fullscreenElement, enter with requestFullscreen() after a user gesture, and exit with document.exitFullscreen().

Continue with fullscreenerror, addEventListener(), or the JavaScript hub.

View Examples Gallery fullscreenerror
Pro Tips

💡 Best Practices

✅ Do

  • Call requestFullscreen() from a click / key handler
  • Read document.fullscreenElement inside fullscreenchange
  • Listen for Esc exits the same way as button exits
  • Handle fullscreenerror and Promise rejections
  • Feature-detect before showing a fullscreen control

❌ Don’t

  • Assume the event object itself says enter vs exit
  • Call exitFullscreen on the element (it is on document)
  • Expect fullscreen to work in every iframe without permissions
  • Assume Baseline Widely available status
  • Overwrite onfullscreenchange if you need multiple listeners
Summary

Key Takeaways

Knowledge Unlocked

Five things to remember about fullscreenchange

Mode already changed—check fullscreenElement; pair with request/exit.

5
Core concepts
📺 01

After toggle

enter or exit

Trigger
📄 02

Event

plain Event

API
🔍 03

fullscreenElement

null = exited

State
🖱️ 04

User gesture

to enter

Rule
🎯 05

Limited avail.

not Baseline

Status
🎯 You understand fullscreenchange—and how to read the current mode
Review Quick Reference →

❓ Frequently Asked Questions

It fires on an Element immediately after that element enters or leaves fullscreen mode. The event itself does not say enter vs exit — check document.fullscreenElement in the handler.
No. MDN does not mark it Deprecated, Experimental, or Non-standard. It has Limited availability (not Baseline), so always test the browsers you care about.
After the event fires, if document.fullscreenElement is non-null, an element is in fullscreen (usually that element). If it is null, fullscreen mode was canceled / exited.
A generic Event (inherits from Event). There is no special FullscreenEvent type for this signal.
Call element.requestFullscreen() to enter (usually from a user gesture). Call document.exitFullscreen() to exit. Listen for fullscreenchange to update your UI.
Listen for the fullscreenerror event on the element. Failures often happen without a user gesture, in unsupported browsers, or when the browser denies permission.
Did you know?

Pressing Esc exits fullscreen without your button code—but fullscreenchange still fires. That is why UI sync should live in the event handler, not only next to requestFullscreen().

Next: fullscreenerror

Learn what happens when a fullscreen request is denied.

fullscreenerror →

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)

5 people found this page helpful

JavaScript Element focusout Event JavaScript Element fullscreenerror Event