HTMLElement: toggle イベント
Baseline
広く利用可能
*
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年1月以降、すべてのブラウザーで利用可能です。
* この機能の一部は、対応レベルが異なる場合があります。
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 回しか発行されない
仕様書
| 仕様書 |
|---|
| HTML # event-toggle |
ブラウザーの互換性
関連情報
- HTML の
popoverグローバル属性 - ポップオーバー API
- 関連イベント:
beforetoggle