HTMLElement: toggle イベント

Baseline 2024

Newly available

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

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

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

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

メモ: toggle イベントは <details> 要素で発行された場合、異なる形で動作します。この場合、ポップオーバーとは関連しておらず、<details> 要素の open/closed 状態が切り替わったときに発行されます。詳しくは HTMLDetailsElement の toggle イベントのページを参照してください。

構文

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

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

ontoggle = (event) => {};

イベント型

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

Event ToggleEvent

例

基本的な例

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

// ...

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});

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

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

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

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

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

仕様書

Specification
HTML Standard
# event-toggle

ブラウザーの互換性

BCD tables only load in the browser

関連情報