HTMLElement: beforetoggle イベント

Baseline 2025 *
Newly available

Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

beforetoggleHTMLElement インターフェイスのイベントで、ポップオーバー要素(すなわち有効な popover 属性がある要素)において、表示または非表示になる直前に発行されます。

  • ポップオーバーが非表示状態から表示状態に遷移した場合、event.oldState プロパティには closed が、event.newState プロパティには open が設定されます。
  • ポップオーバーが表示状態から非表示状態に遷移した場合、 event.oldStateopen に、 event.newStateclosed になります。

構文

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

js
addEventListener("beforetoggle", (event) => {});

onbeforetoggle = (event) => {};

イベント型

ToggleEvent です。Event から継承しています。

Event ToggleEvent

基本的な例

js
const popover = document.getElementById("mypopover");

// ...

popover.addEventListener("beforetoggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover is being shown");
  } else {
    console.log("Popover is being hidden");
  }
});

トグルイベントの合体に関するメモ

beforetoggle イベントが合体していることを特筆に値するでしょう。イベントループが循環する前に複数の beforetoggle イベントが発行された場合、単一のイベントしか発行されないということです。

例えば次のようになります。

js
popover.addEventListener("beforetoggle", () => {
  //...
});

popover.showPopover();
popover.hidePopover();
// `beforetoggle` は 1 回しか発行されない

仕様書

Specification
HTML
# event-beforetoggle

ブラウザーの互換性

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
beforetoggle event
beforetoggle event fires at dialog elements
beforetoggle event fires at popover elements

Legend

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

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

関連情報