このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
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 2020年1月.
* Some parts of this feature may have varying levels of support.
toggle はHTMLElement インターフェイスのイベントで、ポップオーバー要素（すなわち有効なpopover 属性がある要素）において、表示または非表示になった直後に発行されます。
- そのポップオーバー要素が非表示状態から表示状態に遷移した場合、
event.oldStateプロパティはclosedに、event.newStateプロパティはopenにそれぞれ設定されます。 - そのポップオーバー要素が表示状態から非表示状態に遷移した場合、
event.oldStateはopenに、event.newStateはclosedになります。
構文
このイベント名をaddEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("toggle", (event) => {});ontoggle = (event) => {};イベント型
ToggleEvent です。Event から継承しています。
例
基本的な例
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 |
ブラウザーの互換性
関連情報
- HTML の
popoverグローバル属性 - ポップオーバー API
- 関連イベント:
beforetoggle