Element: beforematch イベント

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

onbeforematch = (event) => {};

イベント型

一般的な Event です。

使用上のメモ

HTML の hidden 属性は、until-found の値を受け入れます。この値が指定されると、要素は非表示になりますが、ブラウザーの「ページ内検索」機能やフラグメントナビゲーションではそのコンテンツにアクセスできるようになります。これらの機能により、"hidden until found" のサブツリーの要素にスクロールが発生した場合、ブラウザーは次のようになります。

• 非表示の要素で beforematch イベントが発生する
• その要素から hidden 属性が除去される
• その要素へスクロールする

例

beforematch の使用

この例では、次のものがあります。

• 2 つの <div> 要素。最初の要素は非表示になっていませんが、2 つ目には hidden="until-found" と id="until-found-box" 属性があります。
• "until-found-box" フラグメントをターゲットとしたリンク。

また、hidden until found 要素で発行される beforematch イベントを待ち受けする JavaScript もあります。イベントハンドラーはボックスのテキストコンテンツを変更します。

HTML

<a href="#until-found-box">非表示のコンテンツへ移動</a>

<div>非表示ではない</div>
<div id="until-found-box" hidden="until-found">Hidden until found</div>

<button id="reset">リセット</button>

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();
});

結果

「非表示のコンテンツへ移動」ボタンをクリックすると、hidden-until-found 要素に移動します。beforematch イベントが発行され、テキストコンテンツが更新され、要素のコンテンツが表示されます。

例を再度実行する場合は、「リセット」を押してください。

ブラウザーが hidden 属性の列挙値 "until-found" に対応していない場合、2つ目の <div> は非表示になります（until-found 値が追加される前の hidden は論理属性でした）。

仕様書

ブラウザーの互換性

関連情報

• HTML の hidden 属性