はじめに

<dialog> 要素は、ダイアログに使われたり、Modalに使われたりと便利な要素です。
しかし、今までは <dialog> 要素を開いたり、閉じたりすることで発火するイベントがありませんでした。

ですが、Chrome 132 以降では、「ToggleEvent」が使えるようになり、これから <dialog> 要素がより使いやすくなります。

そのため、この記事では、ダイアログ要素の開閉で発火するイベント「ToggleEvent」について紹介しようと思います。

ToggleEvent

ToggleEventは、ポップオーバー要素の状態が表示と非表示の間で切り替わるときに発火するイベントです。

コンストラクター
- toggleEvent()
インスタンスプロパティ
- ToggleEvent.newState：要素が遷移した後の状態を表す（"open" or "closed"）
- ToggleEvent.oldState：要素が遷移した前の状態を表す（"open" or "closed"）

使い方

sample.js

const dialog = document.getElementById("sample");

dialog.addEventListener("beforetoggle", (event) => {
    console.log(event.newState) // "open" or "closed"
    console.log(event.oldState) // "open" or "closed"
})

まとめ

この記事では、ダイアログ要素の開閉で発火するイベント「ToggleEvent」について紹介しました。

ToggleEventを使えば、ダイアログ要素が表示されたことをトリガーとして、要素を変更したり、スタイルをアップデートしたりできるようになります。

さっと思いつく使い方は、「Modalが表示されたら、Modalの要素にフォーカスを当てる」とかでしょうか？

ToggleEventは、実験的な機能なので、全ブラウザで使えるようになったら、色々と使うタイミングが思いつくのかもしれないですね....

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。