Document: visibilitychange event

The visibilitychange event is fired at the document when the content of its tab have become visible or have been hidden.

Bubbles Yes
Cancelable No
Interface Event
Event handler property onvisibilitychange

Usage notes

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

Safari doesn’t fire visibilitychange as expected when the value of the visibilityState property transitions to hidden; so for that case, you need to also include code to listen for the pagehide event.


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", function() {
  if (document.visibilityState === 'visible') {;
  } else {


Specification Status Comment
Page Visibility (Second Edition)
The definition of 'visibilitychange' in that specification.

Browser compatibility

No compatibility data found. Please contribute data for "api.Document.visibilitychange" (depth: 1) to the MDN compatibility data repository.

See also