Element: beforematch イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

要素が beforematch イベントを受け取るのは、それが hidden until found の状態にあり、ユーザーが「ページ内検索」機能やフラグメントナビゲーションによってコンテンツを見つけたため、ブラウザーがそのコンテンツを表示しようとしているときです。

構文

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

js
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

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

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

CSS

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

JavaScript

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

結果

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

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

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

仕様書

Specification
HTML Standard
# event-beforematch

ブラウザーの互換性

BCD tables only load in the browser

関連情報