Element: beforematch event
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
An element receives a beforematch
event when it is in the hidden until found state and the browser is about to reveal its content because the user has found the content through the "find in page" feature or through fragment navigation.
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
js
addEventListener("beforematch", (event) => {});
onbeforematch = (event) => {};
Event type
A generic Event
.
Usage notes
The HTML hidden
attribute accepts a value until-found
: when this value is specified, the element is hidden but its content will be accessible to the browser's "find in page" feature or to fragment navigation. When these features cause a scroll to an element in a "hidden until found" subtree, the browser will:
- fire a
beforematch
event on the hidden element - remove the
hidden
attribute from the element - scroll to the element
Examples
Using beforematch
In this example we have:
- Two
<div>
elements. The first is not hidden, while the second hashidden="until-found"
andid="until-found-box"
attributes. - A link whose target is the
"until-found-box"
fragment.
We also have some JavaScript that listens for the beforematch
event firing on the hidden until found element. The event handler changes the text content of the box.
HTML
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
css
div {
height: 40px;
width: 300px;
border: 5px dashed black;
margin: 1rem 0;
padding: 1rem;
font-size: 2rem;
}
JavaScript
js
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
"beforematch",
() => (untilFound.textContent = "I've been revealed!")
);
Result
Clicking the "Go to hidden content" button navigates to the hidden-until-found element. The beforematch
event fires, the text content is updated, and then the element's content is displayed.
To run the example again, click "Reload".
If your browser does not support the "until-found"
enumerated value of the hidden
attribute, the second <div>
will be hidden (as hidden
was boolean prior to the addition of the until-found
value).
Specifications
Specification |
---|
HTML Standard # event-beforematch |
Browser compatibility
BCD tables only load in the browser
See also
- The HTML
hidden
attribute