HTMLElement: toggle イベント

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

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

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

構文

このイベント名を 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
# event-toggle

ブラウザーの互換性

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
toggle event
toggle event fires at details elements
toggle event fires at dialog elements
toggle 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

関連情報