onfocus

Onfocus refers to the focus event in web development. It can be used as the HTML attribute onfocus or as a JavaScript event listener registered for the focus event. When an element receives focus—whether by keyboard navigation, mouse interaction, or a programmatic call to element.focus()—the onfocus handler is invoked and can run code in response to that change in focus.

Historically, the focus event does not bubble up the DOM, which means a handler on a parent element may not fire when a child gains focus. Some browsers support event capturing for focus, but a common pattern for delegated handling is to use the focusin and focusout events, which do bubble, or to attach listeners with capture enabled if cross-browser behavior is desired.

Common use cases for onfocus include performing input validation or preparation when a field gains focus, updating visual styling to indicate the active control, and initializing context for assistive technologies. It can also be used to set up state or fetch resources needed when a user starts interacting with a control. Because focus handling can impact perceived performance, handlers are typically kept lightweight and non-blocking.

Compatibility and best practices: onfocus is widely supported in modern browsers, but for robust delegation it is often better to use addEventListener with the focus or focusin event, depending on the desired bubbling behavior. Inline onfocus attributes remain functional but are generally less maintainable than modern event listener approaches. When implementing onfocus, ensure accessibility by preserving clear focus indicators and predictable keyboard navigation.