HTMLElement : évènement toggle

Baseline 2024

Newly available

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

L'évènement toggle de l'interface HTMLElement se déclenche sur un élément popover (c'est-à-dire un élément qui a un attribut popover valide) juste après qu'il a été affiché ou masqué.

  • Si le popover passe de masqué à affiché, la propriété event.oldState sera définie sur closed et la propriété event.newState sera définie sur open.
  • Si le popover passe d'affiché à masqué, alors event.oldState sera open et event.newState sera closed.

Note : L'évènement toggle se comporte différemment lorsqu'il est déclenché sur les éléments <details>. Dans ce cas, il ne concerne pas les popovers, et se déclenche plutôt lorsque l'état open/closed d'un élément <details> est modifié. Consultez la page sur l'évènement toggle de HTMLDetailsElement (en-US) pour plus de détails.

Syntaxe

Utilisez le nom de l'évènement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'évènement.

js
addEventListener("toggle", (event) => {});

ontoggle = (event) => {};

Type d'évènement

ToggleEvent. Hérite de Event.

Event ToggleEvent

Exemples

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

//…

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Le popover a été affiché");
  } else {
    console.log("Le popover a été masqué");
  }
});

Agrégation des évènements de basculement

Il convient de souligner que les évènements toggle sont agrégés, ce qui signifie que si plusieurs évènements toggle sont déclenchés avant que la boucle d'évènements ait eu la possibilité de s'exécuter, un seul évènement sera déclenché.

Par exemple :

js
popover.addEventListener("toggle", () => {
  //…
});

popover.showPopover();
popover.hidePopover();
// `toggle` ne se déclenche qu'une seule fois

Spécifications

Specification
HTML Standard
# event-toggle

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi