Document: visibilitychange event

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

addEventListener("visibilitychange", (event) => {});

onvisibilitychange = (event) => {};

A generic Event.

The event doesn't include the document's updated visibility status, but you can get that information from the document's visibilityState property.

This event fires with a visibilityState of hidden when a user navigates to a new page, switches tabs, closes the tab, minimizes or closes the browser, or, on mobile, switches from the browser to a different app. Transitioning to hidden is the last event that's reliably observable by the page, so developers should treat it as the likely end of the user's session (for example, for sending analytics data).

The transition to hidden is also a good point at which pages can stop making UI updates and stop any tasks that the user doesn't want to have running in the background.

This example begins playing a music track when the document becomes visible, and pauses the music when the document is no longer visible.

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "visible") {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

This example treats the transition to hidden as the end of the user's session, and sends the appropriate analytics using the Navigator.sendBeacon() API:

document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};

• Page Visibility API
• Document.visibilityState
• Don't lose user and app state, use Page Visibility explains in detail why you should use visibilitychange, not beforeunload/unload.
• Page Lifecycle API gives best-practices guidance on handling page lifecycle behavior in your web applications.