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 surclosed
et la propriétéevent.newState
sera définie suropen
. - Si le popover passe d'affiché à masqué, alors
event.oldState
seraopen
etevent.newState
seraclosed
.
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
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.
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
Specification |
---|
HTML Standard # event-toggle |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'API Popover
- L'évènement associé :
beforetoggle