ToggleEvent

Baseline 2023 *

Nouvellement disponible

Depuis November 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

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

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.

Dans cet article

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é");
  }
});

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

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

UI Events
ToggleEvent
Constructeur
1. ToggleEvent()
Propriétés d'instance
Héritage
1. Event
Pages liées à UI Events
Guides
1. Code values for keyboard events
2. Key values for keyboard events

ToggleEvent

Dans cet article

Constructeur

Propriétés de l'instance

Exemples

Spécifications

Compatibilité des navigateurs

Voir aussi

Aider à améliorer MDN