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.
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 Standard # event-toggle |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- HTML の
popover
グローバル属性 - ポップオーバー API
- 関連イベント:
beforetoggle