HTMLDialogElement: close event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
The close event is fired on an HTMLDialogElement object when the <dialog> it represents has been closed.
This event is not cancelable and does not bubble.
Syntax
Use the event name in methods like addEventListener(), or set an event handler property.
js
addEventListener("close", (event) => { })
onclose = (event) => { }
Event type
A generic Event.
Examples
Live example
HTML
html
<dialog id="dialog">
<form method="dialog">
<button type="submit">Close via method="dialog"</button>
</form>
<button id="close">Close via .close() method</button>
<p>Or hit the <kbd>Esc</kbd> key</p>
</dialog>
<button id="open">Open dialog</button>
JavaScript
js
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const closeButton = document.getElementById("close");
openButton.addEventListener("click", () => {
dialog.showModal();
log("dialog: opened");
});
closeButton.addEventListener("click", () => {
dialog.close();
});
dialog.addEventListener("close", (event) => {
log("dialog: closed");
});
Result
Specifications
| Specification |
|---|
| HTML # event-close |