new PageRevealEvent() — Methode · JavaScript-Referenz

Signatur

new PageRevealEvent(type, options)

Beschreibung

Der Konstruktor PageRevealEvent() erzeugt ein Event-Objekt vom Typ PageRevealEvent. Normalerweise legt der Browser dieses Event selbst an und löst es als pagereveal auf window aus. Das passiert, sobald ein Dokument nach einer Navigation oder bei der Wiederherstellung aus dem Back/Forward-Cache (bfcache) zum ersten Mal gerendert wird. Über die Eigenschaft viewTransition erreicht man dann eine eventuell laufende dokumentübergreifende View Transition.

Selbst aufrufen muss man den Konstruktor nur selten. Nützlich ist er vor allem in Unit-Tests, beim Mocking oder in Code, der das Verhalten von pagereveal-Handlern nachstellen soll, ohne tatsächlich zu navigieren. Das erzeugte Objekt kann man mit dispatchEvent() an ein beliebiges EventTarget schicken.

Außer den üblichen Optionen aus EventInit (bubbles, cancelable, composed) nimmt das Options-Objekt auch viewTransition entgegen. Dieser Wert muss ein echtes ViewTransition-Objekt oder null sein.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Events. Der Browser verwendet `"pagereveal"`, bei selbst erzeugten Events ist aber jeder Name erlaubt.
$options	object	{}	Optionales Objekt mit den `EventInit`-Feldern `bubbles`, `cancelable` und `composed` (jeweils Standard `false`) sowie `viewTransition`.
$options.viewTransition	ViewTransition \| null	null	Die `ViewTransition`, die zum Event gehören soll. Man erhält sie z. B. von `document.startViewTransition()`.

Rückgabewert

Typ

PageRevealEvent

Beschreibung

Ein neues PageRevealEvent-Objekt. Seine Eigenschaft viewTransition hat den übergebenen Wert oder ist null.

Beispiele

Einfache Instanz erzeugen

const event = new PageRevealEvent('pagereveal');

console.log(event instanceof Event);
console.log(event.type);
console.log(event.viewTransition);
console.log(event.isTrusted);

true pagereveal null false

pagereveal-Handler im Test auslösen

// Handler, der eine View Transition abhängig vom Ziel anpasst
const onReveal = (e) => {
  if (!e.viewTransition) {
    console.log('Keine View Transition aktiv');
    return;
  }
  e.viewTransition.types.add('slide-in');
  console.log('Transition-Typ gesetzt');
};

window.addEventListener('pagereveal', onReveal);

// Nachstellen ohne echte Navigation
window.dispatchEvent(new PageRevealEvent('pagereveal'));

window.removeEventListener('pagereveal', onReveal);

Keine View Transition aktiv

Event mit echter ViewTransition bestücken

if ('startViewTransition' in document && 'PageRevealEvent' in window) {
  const vt = document.startViewTransition(() => {
    document.body.dataset.state = 'neu';
  });

  const event = new PageRevealEvent('pagereveal', { viewTransition: vt });
  console.log(event.viewTransition === vt);

  await vt.finished;
  console.log('Transition abgeschlossen');
}

true Transition abgeschlossen

// Wichtig · Fallstricke

Browser-Kompatibilität: Unterstützt in Chromium-Browsern ab Version 123 und in Safari ab 18.2. In Firefox fehlt die Unterstützung noch weitgehend. Deshalb vorher mit 'PageRevealEvent' in window prüfen.
Selbst erzeugte Events haben isTrusted === false. Außerdem lösen sie keine echte dokumentübergreifende View Transition aus, sondern rufen nur die registrierten Handler auf.
Für viewTransition sind nur ein echtes ViewTransition-Objekt oder null erlaubt. Jeder andere Wert, etwa ein einfaches Objekt als Attrappe, führt zu einem TypeError. ViewTransition hat keinen öffentlichen Konstruktor.
Der Browser löst pagereveal sehr früh aus, noch vor dem ersten Rendering. Den Listener sollte man daher in einem blockierenden Skript im <head> registrieren, sonst verpasst er das Event.

Siehe auch

new PageSwapEvent() new GamepadEvent() new InterestEvent() new ProgressEvent() new WheelEvent()