HTMLElement : évènement beforetoggle

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 beforetoggle 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 avant qu'il ne soit 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 définie sur open et event.newState sera définie sur 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.

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

onbeforetoggle = (event) => {};

Type d'évènement

ToggleEvent. Hérite de Event.

Event ToggleEvent

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

Une note sur l'agrégation des évènements de basculement

Il convient de souligner que les évènements beforetoggle sont agrégés, ce qui signifie que si plusieurs évènements beforetoggle 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("beforetoggle", () => {
  //…
});

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

Spécifications

Specification
HTML Standard
# event-beforetoggle

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi