Element : évènement beforematch

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

onbeforematch = (event) => { }

Type d'évènement

Un objet Event générique.

Notes d'utilisation

L'attribut HTML hidden accepte une valeur until-found : lorsque cette valeur est définie, l'élément est caché mais son contenu est accessible à la fonction « rechercher dans la page » du navigateur ou à la navigation par fragment. Lorsque ces fonctionnalités provoquent un défilement vers un élément dans un sous-arbre « caché jusqu'à ce qu'il soit trouvé », le navigateur va :

1. Déclenche un évènement beforematch sur l'élément caché
2. Supprime l'attribut hidden de l'élément
3. Fait défiler jusqu'à l'élément

Exemples

Utiliser beforematch

Dans cet exemple, nous avons deux éléments HTML <div>. Le premier est visible, tandis que le second a les attributs hidden="jusqua-trouve" et id="boite-jusqua-trouve". L'élément avec un identifiant boite-jusqua-trouve a une bordure rouge en pointillés et un arrière-plan gris.

Nous avons également un lien qui cible le fragment "boite-jusqua-trouve" et du JavaScript qui écoute le déclenchement de l'évènement beforematch sur cet élément caché. Le gestionnaire d'évènement modifie le contenu textuel de la boîte pour illustrer une action qui peut se produire lorsque l'état caché jusqu'à ce qu'il soit trouvé est sur le point d'être supprimé.

HTML

<a href="#boite-jusqua-trouve">Aller au contenu caché</a>

<div>Je ne suis pas caché</div>
<div id="boite-jusqua-trouve" hidden="jusqua-trouve">
  Caché jusqu'à ce qu'il soit trouvé
</div>

<button id="reinitialiser">Réinitialiser</button>

CSS

div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

div#boite-jusqua-trouve {
  color: red;
  border: 5px dotted red;
  background-color: lightgray;
}

JavaScript

const boiteJusquaTrouve = document.querySelector("#boite-jusqua-trouve");
boiteJusquaTrouve.addEventListener(
  "beforematch",
  () => (boiteJusquaTrouve.textContent = "Caché jusqu'à ce qu'il soit trouvé"),
);

document.querySelector("#reinitialiser").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});

Résultat

Cliquer sur le bouton « Aller au contenu caché » navigue vers l'élément dans l'état caché jusqu'à ce qu'il soit trouvé. L'évènement beforematch se déclenche, le contenu textuel est mis à jour, puis le contenu de l'élément est affiché (l'attribut hidden est supprimé).

Pour exécuter à nouveau l'exemple, cliquez sur « Réinitialiser ».

Si votre navigateur ne prend pas en charge la valeur énumérée "jusqu'à-trouvé" de l'attribut hidden, le deuxième <div> est masqué (car hidden était booléen avant l'ajout de la valeur "jusqu'à-trouvé").

Spécifications

Compatibilité des navigateurs

Voir aussi

• L'attribut HTML hidden