Document: visibilitychange

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.

Examples

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') {
    backgroundMusic.play();
  } else {
    backgroundMusic.pause();
  }
});

Specifications

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

Browser compatibility

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

See also