References

Beginner-friendly references for web development, with live, editable examples.

The HTML onclose event

Event All modern browsers Updated
Quick answer

The HTML onclose attribute runs JavaScript when a

is closed. It is an inline handler for the close event; in modern code prefer addEventListener('close', …).

Overview

The onclose event attribute runs JavaScript when a dialog is closed. In JavaScript the event itself is named close — drop the on prefix when you call addEventListener.

It relates to native disclosure and dialog widgets — the <dialog> element, <details>, and popovers — letting you react when they open, close or are dismissed without wiring up the behavior yourself.

You can wire this up with the inline onclose HTML attribute, but the modern, recommended approach is element.addEventListener('close', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element onclose="handler()">…</element>

element.addEventListener('close', handler);

Best practices

  • Prefer element.addEventListener('close', handler) over the inline onclose attribute — it separates behavior from markup and allows multiple handlers.
  • Prefer the native <dialog>, <details> and popover APIs that fire these events over hand-built widgets.
  • Use the event to sync state — for example to lazy-load content when a panel opens.
  • Keep these widgets accessible: manage focus and provide an accessible name.

Frequently asked questions

What is the onclose event?
It runs JavaScript when a dialog is closed. In JavaScript the event is named close.
Which elements fire this event?
Native disclosure and dialog widgets — <dialog>, <details> and popovers.
How do I react when a details element opens?
Listen for the toggle event and check the element's open property.
Should I use the onclose attribute or addEventListener?
Prefer addEventListener('close', …) in JavaScript. The inline onclose attribute works but mixes behavior into the markup and allows only one handler per element.
onclick oncontextlost