ToggleEvent.oldState — Eigenschaft · JavaScript-Referenz

Signatur

ToggleEvent.oldState

Beschreibung

Die Eigenschaft oldState des ToggleEvent-Interfaces liefert den Zustand, den das Element vor dem Umschalten hatte. Mögliche Werte sind "open" und "closed". Zusammen mit newState beschreibt sie den vollständigen Zustandswechsel.

Ein ToggleEvent wird bei zwei Ereignissen ausgelöst:

beforetoggle: feuert vor dem Wechsel bei Popover-Elementen (Attribut popover) und seit Kurzem auch bei <dialog>. Beim Öffnen lässt sich der Wechsel hier mit preventDefault() abbrechen.
toggle: feuert nach dem Wechsel bei Popovers und <details>-Elementen.

In der Praxis nutzt man oldState, um Animationen, Protokollierung oder Zustandssynchronisation zu steuern. Meist reicht zwar newState, doch oldState ist nützlich, wenn mehrere schnell aufeinanderfolgende Wechsel zu einem einzigen toggle-Ereignis zusammengefasst werden: Dann spiegelt oldState den Ausgangszustand des ersten Wechsels wider.

Rückgabewert

Typ

string

Beschreibung

"open", wenn das Element vorher geöffnet war, oder "closed", wenn es vorher geschlossen war. Bei selbst konstruierten Ereignissen ohne Angabe ein leerer String "".

Beispiele

Zustandswechsel eines Popovers protokollieren

// HTML: <button popovertarget="menu">Menü</button>
//       <div id="menu" popover>Inhalt</div>
const menu = document.getElementById('menu');

menu.addEventListener('toggle', (event) => {
  console.log(`Popover: ${event.oldState} → ${event.newState}`);
});

menu.showPopover();

Popover: closed → open

Öffnen im beforetoggle-Ereignis verhindern

const panel = document.getElementById('menu');
let gesperrt = true;

panel.addEventListener('beforetoggle', (event) => {
  // Nur der Wechsel von geschlossen zu offen ist abbrechbar
  if (event.oldState === 'closed' && gesperrt) {
    event.preventDefault();
    console.log('Öffnen blockiert');
  }
});

panel.showPopover(); // bleibt geschlossen

Öffnen blockiert

<details>-Element: Aufklappen zählen

// HTML: <details id="faq"><summary>Frage</summary>Antwort</details>
const faq = document.getElementById('faq');
let aufgeklappt = 0;

faq.ontoggle = (event) => {
  if (event.oldState === 'closed') {
    aufgeklappt++;
    console.log(`FAQ wurde ${aufgeklappt}× geöffnet`);
  }
};

faq.open = true;

FAQ wurde 1× geöffnet

ToggleEvent manuell erzeugen

const event = new ToggleEvent('toggle', {
  oldState: 'open',
  newState: 'closed'
});

console.log(event.oldState);
console.log(event instanceof Event);

open true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an event.oldState wird ignoriert (im Strict Mode ohne Fehler, da nur ein Getter existiert). Werte lassen sich nur über den Konstruktor new ToggleEvent(type, { oldState }) setzen.
Zusammengefasste Ereignisse: Schaltet man ein Element mehrfach schnell hintereinander um, kann nur ein toggle-Ereignis feuern. oldState und newState können dann sogar gleich sein (z. B. "closed" → "closed").
Abbrechbarkeit: preventDefault() wirkt nur bei beforetoggle mit oldState === "closed". Das Schließen lässt sich nicht verhindern.
Kompatibilität: Für Popovers ab Chrome/Edge 114, Firefox 125 und Safari 17 verfügbar. Bei <details> war das toggle-Ereignis in älteren Browsern ein einfaches Event ohne oldState, daher gegebenenfalls mit 'oldState' in event prüfen.
toggle- und beforetoggle-Ereignisse steigen nicht auf (bubbles: false); der Listener muss also direkt am Element hängen.

Siehe auch

PressureRecord.state ToggleEvent.newState ToggleEvent.source StorageEvent.oldValue MouseEvent.offsetX