JavaScript Element beforematch Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word BEFOREMATCH

Definition

In JavaScript, an element receives beforematch when it is in the hidden until found state and the browser is about to reveal it because the user found the content via find in page or fragment navigation (MDN).

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for beforematch. Start with this line.

JavaScript
el.addEventListener("beforematch", fn)
CallWhat it does
el.addEventListener("beforematch", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("beforematch", …) — no import required.

Library declarations
JavaScript
el.addEventListener("beforematch", fn)

Parameters

ParameterDescription
hidden="until-found"Required. Enables searchable hidden state
Handler workOptional. Run just before reveal

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Listen and Update Text (MDN)

When the fragment link reveals the box, update its text in beforematch.

JavaScript
const untilFound = document.querySelector("#until-found-box");

untilFound.addEventListener("beforematch", () => {
  untilFound.textContent = "I've been revealed!";
});
Try It Yourself

How It Works

  1. Mark the box with hidden="until-found" and an id.
  2. Listen for beforematch. Fires just before reveal (MDN).
  3. Update textContent. Runs before the browser removes hidden.
  4. Browser finishes by showing the element and scrolling to it.

Example 2 — onbeforematch Property

Same reveal hook using the handler property instead of addEventListener.

JavaScript
const box = document.getElementById("until-found-box");
const log = document.getElementById("out");

box.onbeforematch = () => {
  log.textContent = "beforematch via onbeforematch";
  box.textContent = "Revealed!";
};
Try It Yourself

How It Works

  1. Assign onbeforematch. One handler property (like onclick).
  2. Log and update when the event fires.
  3. Prefer addEventListener when you need multiple listeners.
  4. Same reveal order as Example 1 after the handler returns.

Example 3 — Feature Detect

Check for the handler property before relying on beforematch.

JavaScript
const ok = "onbeforematch" in document.documentElement;
console.log(
  ok
    ? "beforematch supported"
    : "use a manual expand fallback"
);
Try It Yourself

How It Works

  1. Test "onbeforematch" in …. Cheap capability check.
  2. If missing, keep a normal expand/collapse control.
  3. Also test in real browsers that until-found reveals as expected.
  4. MDN note: without support, hidden may behave like boolean hide.
Compatibility

Browser Support

Element.beforematch is marked Baseline Newly available on MDN (since December 2025). Logos use the shared browser-image-sprite.png sprite from this project.

✓ Baseline · Newly available

Element beforematch

Fires before a hidden-until-found element is revealed by find-in-page or a fragment link.

Newly Available
Google Chrome Supported in recent versions
Supported
Mozilla Firefox Supported in recent versions
Supported
Apple Safari Supported in recent versions
Supported
Microsoft Edge Supported · Chromium
Supported
Opera Supported in recent versions
Supported
Internet Explorer Not supported
Not supported
beforematch Baseline 2025

Bottom line: Safe in latest browsers. Feature-detect and keep a manual expand fallback for older engines. See the MDN Element beforematch reference.

Frequently Asked Questions

An element receives beforematch when it is in the hidden until found state and the browser is about to reveal its content because the user found it via find-in-page or fragment navigation (MDN).
No. MDN marks Element beforematch as Baseline Newly available (since December 2025). It is not Deprecated, Experimental, or Non-standard. Older browsers may still lack support.
A generic Event. There are no beforematch-only properties beyond the usual Event interface.
Set the HTML hidden attribute to until-found (hidden="until-found"). The element stays visually hidden but remains searchable and reachable by fragment links. When a match scrolls to it, the browser fires beforematch, removes hidden, then scrolls (MDN).
First beforematch fires on the hidden element, then the browser removes the hidden attribute, then it scrolls to the element (MDN).
A practical check is: "onbeforematch" in document.documentElement (or HTMLElement.prototype). Also verify hidden="until-found" behavior in your target browsers.

Next: Element beforescriptexecute

Learn the (non-standard) event fired before a script is about to execute.

beforescriptexecute tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element beforeinput Event JavaScript Element beforescriptexecute Event