元素：beforematch 事件

实验性： 这是一个实验性技术
在生产环境中使用此功能前，请仔细检查浏览器兼容性表。

当元素处于“隐藏直到找到”状态，并且浏览器即将显示其内容（因为用户通过“页面内查找”功能或片段导航找到了该内容）时，该元素会收到一个beforematch 事件。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或者设置事件处理程序属性。

addEventListener("beforematch", (event) => {});

onbeforematch = (event) => {};

事件类型

一个通用的 Event。

使用说明

HTML hidden 属性接受值 until-found：当指定此值时，元素会被隐藏，但其内容对浏览器的“页面内查找”功能或片段导航可用。当这些功能导致滚动到“隐藏直到找到”子树中的元素时，浏览器将

在隐藏的元素上触发 beforematch 事件
从元素中移除 hidden 属性
滚动到该元素

示例

使用 beforematch

在此示例中，我们有

两个 <div> 元素。第一个元素未隐藏，而第二个元素具有 hidden="until-found" 和 id="until-found-box" 属性。
一个链接，其目标是 "until-found-box" 片段。

我们还有一些 JavaScript 代码，用于侦听在隐藏的“直到找到”元素上触发的 beforematch 事件。事件处理程序会更改该框的文本内容。

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>

<button id="reset">Reset</button>

CSS

css

div {
  height: 40px;
  width: 300px;
  border: 5px dashed black;
  margin: 1rem 0;
  padding: 1rem;
  font-size: 2rem;
}

#until-found-box {
  scroll-margin-top: 200px;
}

JavaScript

const untilFound = document.querySelector("#until-found-box");
untilFound.addEventListener(
  "beforematch",
  () => (untilFound.textContent = "I've been revealed!"),
);

document.querySelector("#reset").addEventListener("click", () => {
  document.location.hash = "";
  document.location.reload();
});

结果

点击“转到隐藏内容”按钮将导航到隐藏的（直到找到）元素。beforematch 事件将触发，文本内容将更新，然后元素的内容将显示。

要再次运行示例，请点击“重新加载”。

如果您的浏览器不支持hidden 属性的"until-found" 枚举值，则第二个<div> 将被隐藏（因为在添加until-found 值之前，hidden 是布尔值）。

规范

规范
HTML 标准 # event-beforematch 事件

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅

HTML 的 hidden 属性