HTMLElement : évènement toggle

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.

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.

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

Type d'évènement

ToggleEvent. Hérite de Event.

Exemples

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 :

popover.addEventListener("toggle", () => {
 //...
});
popover.showPopover();
popover.hidePopover();
// `toggle` ne se déclenche qu'une seule fois

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'API Popover
• L'évènement associé : beforetoggle