The HTML onbeforematch event
The HTML onbeforematch attribute runs JavaScript when a hidden="until-found" element is about to be revealed by find-in-page or a fragment link. It is an inline handler for the beforematch event; in modern code prefer addEventListener('beforematch', …).
Overview
The onbeforematch event attribute runs JavaScript before hidden-until-found content is revealed. In JavaScript the event itself is named beforematch — drop the on prefix when you call addEventListener.
It relates to native disclosure and dialog widgets — the <dialog> element, <details>, and popovers — letting you react when they open, close or are dismissed without wiring up the behavior yourself.
You can wire this up with the inline onbeforematch HTML attribute, but the modern, recommended approach is element.addEventListener('beforematch', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.
Syntax
<element onbeforematch="handler()">…</element>
element.addEventListener('beforematch', handler);Best practices
- Prefer
element.addEventListener('beforematch', handler)over the inlineonbeforematchattribute — it separates behavior from markup and allows multiple handlers. - Prefer the native <dialog>, <details> and popover APIs that fire these events over hand-built widgets.
- Use the event to sync state — for example to lazy-load content when a panel opens.
- Keep these widgets accessible: manage focus and provide an accessible name.
Frequently asked questions
What is the onbeforematch event?
beforematch.Which elements fire this event?
How do I react when a details element opens?
open property.Should I use the onbeforematch attribute or addEventListener?
addEventListener('beforematch', …) in JavaScript. The inline onbeforematch attribute works but mixes behavior into the markup and allows only one handler per element.