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
# event-beforematch

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
beforematch event
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

関連情報