ToggleEvent

Baseline 2025
Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

L'interface ToggleEvent représente un évènement qui notifie lorsqu'un élément popover change d'état entre visible et masqué.

Cette interface est implémentée par les évènements beforetoggle et toggle émis par HTMLElement lorsqu'un popover change d'état, visible ou masqué (avant et après, respectivement).

Event ToggleEvent

Note : ToggleEvent n'a aucun rapport avec l'évènement toggle de l'élément <details>, qui se déclenche sur un élément <details> lorsque son état open/closed change. Dans ce cas, toggle implémente l'interface générique Event.

Constructeur

ToggleEvent()

Crée un objet ToggleEvent.

Propriétés de l'instance

Cette interface hérite des propriétés de son parent, Event.

ToggleEvent.newState Lecture seule

Une chaîne de caractères (soit "open" soit "closed"), représentant l'état vers lequel l'élément est en train de transitionner.

ToggleEvent.oldState Lecture seule

Une chaîne de caractères (soit "open" soit "closed"), représentant l'état depuis lequel l'élément est en train de transitionner.

Exemples

js
const popover = document.getElementById("mypopover");

// …

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Le popover est en train d'être affiché");
  } else {
    console.log("Le popover est en train d'être masqué");
  }
});

Spécifications

Specification
HTML
# toggleevent

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ToggleEvent
ToggleEvent() constructor
newState
oldState

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Voir aussi