HTMLElement: beforetoggle イベント
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.
beforetoggle は HTMLElement インターフェイスのイベントで、ポップオーバー要素（すなわち有効な popover 属性がある要素）において、表示または非表示になる直前に発行されます。
- ポップオーバーが非表示状態から表示状態に遷移した場合、
event.oldStateプロパティにはclosedが、event.newStateプロパティにはopenが設定されます。 - ポップオーバーが表示状態から非表示状態に遷移した場合、
event.oldStateはopenに、event.newStateはclosedになります。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("beforetoggle", (event) => {});
onbeforetoggle = (event) => {};
イベント型
ToggleEvent です。Event から継承しています。
例
基本的な例
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 |
ブラウザーの互換性
関連情報
- HTML の
popoverグローバル属性 - ポップオーバー API
- 関連イベント:
toggle