Element: beforematch-Event
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Ein Element erhält ein beforematch-Event, wenn es sich im versteckt bis gefunden-Zustand befindet und der Browser im Begriff ist, dessen Inhalt anzuzeigen, weil der Benutzer den Inhalt über die „Auf Seite suchen“-Funktion oder über Fragmentnavigation gefunden hat.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.
addEventListener("beforematch", (event) => { })
onbeforematch = (event) => { }
Ereignistyp
Ein generisches Event.
Verwendungshinweise
Das HTML-Attribut hidden akzeptiert den Wert until-found: Wenn dieser Wert angegeben ist, wird das Element versteckt, aber sein Inhalt ist über die „Auf Seite suchen“-Funktion des Browsers oder über die Fragmentnavigation zugänglich. Wenn diese Funktionen dazu führen, dass zu einem Element in einem „versteckt bis gefunden“-Teilbaum gescrollt wird, wird der Browser folgendes tun:
- Ein
beforematch-Event auf dem versteckten Element auslösen - Das
hidden-Attribut vom Element entfernen - Zum Element scrollen
Beispiele
>Verwendung von beforematch
In diesem Beispiel haben wir zwei <div>-Elemente.
Das erste ist sichtbar, während das zweite die Attribute hidden="until-found" und id="until-found-box" hat.
Das Element mit der until-found-box-ID hat einen roten gepunkteten Rahmen und einen grauen Hintergrund.
Wir haben auch einen Link, der das Fragment "until-found-box" anvisiert, und JavaScript, das auf das Feuer des beforematch-Events bei diesem versteckten Element hört.
Der Ereignishandler ändert den Textinhalt der Box, um eine Aktion zu veranschaulichen, die auftreten kann, wenn der versteckt bis gefunden-Zustand entfernt werden soll.
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>
CSS
div {
height: 40px;
width: 300px;
border: 5px dashed black;
margin: 1rem 0;
padding: 1rem;
font-size: 2rem;
}
div#until-found-box {
color: red;
border: 5px dotted red;
background-color: lightgray;
}
JavaScript
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
"beforematch",
() => (untilFound.textContent = "I've been revealed!"),
);
Ergebnis
Wenn Sie auf die Schaltfläche „Zum versteckten Inhalt gehen“ klicken, navigieren Sie zu dem Element im versteckt bis gefunden-Zustand.
Das beforematch-Ereignis wird ausgelöst, der Textinhalt wird aktualisiert, und dann wird der Inhalt des Elements angezeigt (das hidden-Attribut wird entfernt).
Um das Beispiel erneut auszuführen, klicken Sie auf „Neu laden“.
Wenn Ihr Browser den "until-found"-enumerierten Wert des hidden-Attributs nicht unterstützt, wird das zweite <div> ausgeblendet (da hidden vor der Hinzufügung des until-found-Wertes einen booleschen Wert hatte).
Spezifikationen
| Specification |
|---|
| HTML> # event-beforematch> |
Browser-Kompatibilität
Loading…
Siehe auch
- Das HTML-Attribut
hidden