Element: beforematch-Ereignis

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener(), oder setzen Sie eine Ereignishandler-Eigenschaft.

addEventListener("beforematch", (event) => {});

onbeforematch = (event) => {};

Ein generisches Event.

Das HTML-Attribut hidden akzeptiert den Wert until-found: wenn dieser Wert angegeben ist, wird das Element versteckt, aber sein Inhalt wird für die "Seite durchsuchen"-Funktion des Browsers oder für die Fragmentnavigation zugänglich sein. Wenn diese Funktionen zu einem Bildlauf zu einem Element in einem "versteckt bis gefunden"-Unterbaum führen, wird der Browser:

• ein beforematch-Ereignis auf dem versteckten Element auslösen
• das hidden-Attribut vom Element entfernen
• zum Element scrollen

In diesem Beispiel haben wir:

• Zwei <div>-Elemente. Das erste ist nicht versteckt, während das zweite die Attribute hidden="until-found" und id="until-found-box" hat.
• Einen Link, dessen Ziel das "until-found-box"-Fragment ist.

Wir haben auch etwas JavaScript, das auf das Auslösen des beforematch-Ereignisses auf dem versteckten, bis gefundenen Element hört. Der Ereignishandler ändert den Textinhalt des Kastens.

HTML

<a href="#until-found-box">Go to hidden content</a>

<div>I'm not hidden</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>

<button id="reset">Reset</button>

CSS

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

#until-found-box {
  scroll-margin-top: 200px;
}

JavaScript

const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);

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

Ergebnis

Wenn Sie auf die Schaltfläche "Gehe zu verstecktem Inhalt" klicken, wird zum versteckten-bis-gefundenen Element navigiert. Das beforematch-Ereignis wird ausgelöst, der Textinhalt wird aktualisiert, und dann wird der Inhalt des Elements angezeigt.

Um das Beispiel erneut auszuführen, klicken Sie auf "Neu laden".

Wenn Ihr Browser den hidden-Attributwert "until-found" nicht unterstützt, wird das zweite <div> versteckt sein (da hidden vor der Hinzufügung des until-found-Werts boolesch war).

• Das HTML-Attribut hidden