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.
Theclose event is fired on anHTMLDialogElement 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 likeaddEventListener(), or set an event handler property.
js
addEventListener("close", (event) => { })onclose = (event) => { }Event type
A genericEvent.
Examples
Handlingclose events
This example demonstrates how to listen forclose events triggered by several different methods for closing a dialog:
- Calling the
close()method - A form with
method="dialog". Submitting the form closes thedialogand causes asubmitevent to be fired, without submitting data or clearing the form - TheEsc key.See
cancelevent
HTML
html
<dialog> <form method="dialog"> <button type="submit">Close via method="dialog"</button> </form> <p><button>Close via .close() method</button></p> <p>Or hit the <kbd>Esc</kbd> key</p></dialog><button>Open dialog</button><pre></pre>#log { height: 170px; overflow: scroll; padding: 0.5rem; border: 1px solid black;}const logElement = document.getElementById("log");function log(text, clear = false) { if (clear) { logElement.innerText = ""; } logElement.innerText = `${logElement.innerText}${text}\n`; logElement.scrollTop = logElement.scrollHeight;}JavaScript
js
const dialog = document.getElementById("dialog");const openButton = document.getElementById("open");const closeButton = document.getElementById("close");openButton.addEventListener("click", () => { log("open button click event fired", true); log("dialog showModal() called"); dialog.showModal();});closeButton.addEventListener("click", () => { log("close button click event fired"); log("dialog close() called"); dialog.close();});dialog.addEventListener("close", (event) => { log("dialog close event fired");});Result
Specifications
| Specification |
|---|
| HTML # event-close |
Browser compatibility
See also
- HTML
<dialog>element