ToggleEvent.newState — Eigenschaft · JavaScript-Referenz

Signatur

ToggleEvent.newState

Beschreibung

Die Eigenschaft newState des ToggleEvent-Interfaces enthält den Zielzustand eines Elements, das gerade ein- oder ausgeblendet wird. Mögliche Werte sind "open" und "closed". Das Gegenstück dazu ist ToggleEvent.oldState, das den vorherigen Zustand liefert.

ToggleEvent-Objekte werden bei zwei Ereignissen ausgelöst:

beforetoggle: Wird bei Popover-Elementen (Attribut popover) vor dem Zustandswechsel ausgelöst. Beim Öffnen (newState === "open") lässt sich das Ereignis mit preventDefault() abbrechen.
toggle: Wird nach dem Wechsel ausgelöst, sowohl bei Popovers als auch bei <details>-Elementen (bei <dialog> in neueren Browsern ebenfalls). Dieses Ereignis ist nicht abbrechbar.

Mit newState reagieren Sie gezielt auf Öffnen oder Schließen, etwa um Inhalte nachzuladen, Analyse-Ereignisse zu senden, ARIA-Attribute zu setzen oder Animationen zu steuern. Ohne diese Eigenschaft müssten Sie den Zustand erst über element.matches(":popover-open") oder details.open selbst ermitteln.

Rückgabewert

Typ

"open" | "closed"

Beschreibung

Der Zustand, in den das Element wechselt: "open" beim Öffnen, "closed" beim Schließen.

Beispiele

Popover-Zustand beim Umschalten protokollieren

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

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

menu.addEventListener('toggle', (event) => {
  if (event.newState === 'open') {
    console.log('Popover ist jetzt sichtbar');
  } else {
    console.log('Popover wurde geschlossen');
  }
});

Wechsel: closed → open Popover ist jetzt sichtbar

Öffnen eines Popovers bedingt verhindern

const panel = document.getElementById('panel');
let isLoggedIn = false;

panel.addEventListener('beforetoggle', (event) => {
  // Nur das Öffnen ist abbrechbar
  if (event.newState === 'open' && !isLoggedIn) {
    event.preventDefault();
    console.log('Bitte zuerst anmelden.');
  }
});

panel.showPopover();

Bitte zuerst anmelden.

Inhalte beim Aufklappen eines <details>-Elements nachladen

// HTML: <details id="faq"><summary>FAQ</summary><div class="body"></div></details>
const faq = document.getElementById('faq');
let loaded = false;

faq.addEventListener('toggle', async (event) => {
  if (event.newState !== 'open' || loaded) return;
  const res = await fetch('/api/faq');
  const html = await res.text();
  faq.querySelector('.body').textContent = html;
  loaded = true;
});

ToggleEvent manuell erzeugen

const evt = new ToggleEvent('toggle', {
  oldState: 'closed',
  newState: 'open'
});
console.log(evt.newState);

// Schreibgeschützt: Zuweisung wird ignoriert
evt.newState = 'closed';
console.log(evt.newState);

open open

// Wichtig · Fallstricke

Nur beim Öffnen abbrechbar: preventDefault() wirkt ausschließlich in beforetoggle bei newState === "open". Das Schließen lässt sich so nicht verhindern.
Zusammengefasste toggle-Ereignisse: Folgen mehrere Wechsel sehr schnell aufeinander, kann der Browser sie zu einem einzigen toggle-Ereignis zusammenfassen. newState gibt dann den Endzustand an. Deshalb nicht einfach Öffnungen und Schließungen mitzählen.
Schreibgeschützt: Zuweisungen an newState werden stillschweigend ignoriert (im Strict Mode gibt es einen TypeError).
Kompatibilität: Popover-Unterstützung mit ToggleEvent gibt es ab Chrome/Edge 114, Safari 17 und Firefox 125. Bei <details> lieferten ältere Browser ein einfaches Event ohne newState. Dann ist der Wert undefined, und als Fallback bietet sich details.open an.
Bei <details> wird toggle asynchron ausgelöst, also erst nachdem sich das Attribut open schon geändert hat.

Siehe auch

PointerEvent.persistentDeviceId ToggleEvent.oldState ToggleEvent.source StorageEvent.newValue MouseEvent.metaKey