files/en-us/web/api/htmldialogelement/close_event/index.md
{{APIRef("HTML DOM")}}
The close event is fired on an HTMLDialogElement object when the {{htmlelement("dialog")}} it represents has been closed.
This event is not cancelable and does not bubble.
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
addEventListener("close", (event) => { })
onclose = (event) => { }
A generic {{domxref("Event")}}.
close eventsThis example demonstrates how to listen for close events triggered by several different methods for closing a dialog:
method="dialog". Submitting the form closes the dialog and causes a {{domxref("HTMLFormElement/submit_event", "submit")}} event to be fired, without submitting data or clearing the form<dialog id="dialog">
<form method="dialog">
<button type="submit">Close via method="dialog"</button>
</form>
<p><button id="close">Close via .close() method</button></p>
<p>Or hit the <kbd>Esc</kbd> key</p>
</dialog>
<button id="open">Open dialog</button>
<pre id="log"></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;
}
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");
});
{{ EmbedLiveSample('Handling close events', '100%', '250px') }}
{{Specifications}}
{{Compat}}