Элемент: событие beforematch

Элемент получает событие beforematch при переходе из состояния скрыто до нахождения в состояние отображения содержимого браузером, так как пользователь нашел его с помощью функции «найти в странице» или навигации по фрагменту.

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

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

onbeforematch = (event) => {};

Общее Event.

Атрибут HTML hidden принимает значение until-found: когда это значение указано, элемент скрыт, но его содержимое доступно для функции «найти в странице» браузера или навигации по фрагментам. Когда эти функции вызывают прокрутку к элементу в поддереве «скрыто до нахождения», браузер:

• вызовет событие beforematch на скрытом элементе
• удалит атрибут hidden с элемента
• прокрутит к элементу

В этом примере:

• Есть два элемента <div>. Первый не скрыт, а второй имеет атрибуты hidden="until-found" и id="until-found-box".
• Ссылка, целевой фрагмент которой — "until-found-box".

Также есть JavaScript, который слушает событие beforematch на элементе, скрытом до его нахождения. Обработчик события изменяет текстовое содержимое блока.

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

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

JavaScript

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

Результат

Нажатие на кнопку «Перейти к скрытому содержимому» переходит к элементу, скрытому до его нахождения. Событие beforematch срабатывает, текстовое содержимое обновляется, а затем отображается содержимое элемента.

Чтобы снова запустить пример, нажмите «Перезагрузить».

Если ваш браузер не поддерживает перечисление "until-found" атрибута hidden, второй <div> будет скрыт (так как hidden был булевым до добавления значения until-found).

• Атрибут HTML hidden