Element：beforematch 事件
基线
2025
最近可用
自 2025年12月 起，此特性已在最新浏览器中得到支持。但在较旧的设备或浏览器中可能无法运行。
Want more browser support for this feature? Tell us why.
beforematch 事件会在元素处于找到后显示状态，且用户通过“在页面中查找”功能或片段导航找到了其内容、浏览器即将显示该内容时触发。
语法
在 addEventListener() 等方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("beforematch", (event) => { })
onbeforematch = (event) => { }
事件类型
通用的 Event。
使用说明
HTML hidden 属性接受 until-found 值：指定此值时，元素会隐藏，但浏览器的“在页面中查找”功能或片段导航可访问其内容。当这些功能导致滚动到“找到后显示”子树中的元素时，浏览器将：
- 在隐藏元素上触发
beforematch事件。 - 移除该元素的
hidden属性。 - 滚动到该元素。
示例
使用 beforematch
本例有两个 <div> 元素。第一个可见，第二个具有 hidden="until-found" 和 id="until-found-box" 属性。ID 为 until-found-box 的元素具有红色点状边框和灰色背景。
我们还有一个以 "until-found-box" 片段为目标的链接，以及监听隐藏元素上 beforematch 事件的 JavaScript。事件处理器会更改该框的文本内容，以说明在找到后显示状态即将移除时可以执行的操作。
HTML
html
<a href="#until-found-box">转到隐藏内容</a>
<div>我没有隐藏</div>
<div id="until-found-box" hidden="until-found">找到后显示</div>
CSS
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
js
const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
"beforematch",
() => (untilFound.textContent = "我已显示！"),
);
结果
单击“转到隐藏内容”按钮会导航至处于找到后显示状态的元素。beforematch 事件触发，文本内容更新，随后显示元素内容（移除 hidden 属性）。
要再次运行该示例，请单击“重置”。
如果浏览器不支持 hidden 属性的 "until-found" 枚举值，第二个 <div> 将被隐藏（在添加 until-found 值前，hidden 是布尔属性）。
规范
| 规范 |
|---|
| HTML # event-beforematch |
浏览器兼容性
参见
- HTML
hidden属性