HTMLElement : évènement beforetoggle

Baseline 2024

Newly available

Depuis ⁨April 2024⁩, 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.

L'évènement beforetoggle de l'interface HTMLElement se déclenche sur un élément de fenêtre contextuelle (popover en anglais) (c'est-à-dire un élément qui a un attribut popover valide) juste avant qu'il ne soit affiché ou masqué.

Si la fenêtre contextuelle 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 la fenêtre contextuelle passe d'affiché à masqué, alors event.oldState sera définie sur open et event.newState sera définie sur closed.

Cet évènement est annulable lorsqu'un élément est basculé en ouverture (« affiché ») mais pas lorsqu'il est en cours de fermeture.

Parmi ses usages, cet évènement peut servir à :

empêcher l'affichage d'un élément.
ajouter ou supprimer des classes ou des propriétés de l'élément ou d'éléments associés, par exemple pour contrôler le comportement d'animation d'une boîte de dialogue lors de son ouverture et de sa fermeture.
réinitialiser l'état de l'élément avant son ouverture ou après son masquage, par exemple pour remettre à zéro un formulaire de dialogue et sa valeur de retour, ou pour masquer des fenêtres contextuelles manuelles imbriquées lors de la réouverture d'une fenêtre contextuelle.

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("beforetoggle", (event) => { })

onbeforetoggle = (event) => { }

Type d'évènement

Un objet ToggleEvent. Hérite de l'objet Event.

Exemples

Les exemples ci‑dessous montrent comment l'évènement beforetoggle peut être utilisé pour un de fenêtre contextuelle (popover en anglais) ou un élément HTML <dialog>. Les mêmes exemples fonctionnent de façon similaire pour les autres types d'éléments.

Exemple simple

Cet exemple montre comment écouter l'évènement beforetoggle et consigner le résultat.

HTML

Le HTML se compose d'une fenêtre contextuelle et d'un bouton permettant de l'afficher ou de le masquer.

html

<button popovertarget="mafenetre">Basculer la fenêtre contextuelle</button>
<div id="mafenetre" popover>Contenu de la fenêtre contextuelle</div>

<pre id="journaux"></pre>

#journaux {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const elementJournaux = document.querySelector("#journaux");
function log(text) {
  elementJournaux.innerText = `${elementJournaux.innerText}${text}\n`;
  elementJournaux.scrollTop = elementJournaux.scrollHeight;
}

JavaScript

Le code ajoute un écouteur pour l'évènement beforetoggle et consigne l'état.

const fenetreContextuelle = document.getElementById("mafenetre");

fenetreContextuelle.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    log("La fenêtre contextuelle est sur le point d'être affichée");
  } else {
    log("La fenêtre contextuelle est sur le point d'être masquée");
  }
});

Resultat

Une note sur l'agrégation des évènements `beforetoggle`

Si plusieurs évènements beforetoggle sont déclenchés avant que la boucle d'évènements ait la possibilité de s'exécuter, un seul évènement sera déclenché. On parle d'« agrégation d'évènements ».

Par exemple :

fenetreContextuelle.addEventListener("beforetoggle", () => {
  // …
});

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

Autres exemples

Ouverture d'une boîte de dialogue modale — exemple dans HTMLDialogElement.

Spécifications

Specification
HTML # event-beforetoggle

Compatibilité des navigateurs

Voir aussi

L'attribut HTML universel popover
L'API Popover
L'évènement associé : toggle

Help improve MDN

Learn how to contribute

Cette page a été modifiée le ⁨5 janv. 2026⁩ par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content