ToggleEvent

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis novembre 2023.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

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).

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

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

Spécification
HTML # toggleevent

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 9 oct. 2025 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu