Element: focusout event

The focusout event fires when an element has lost focus, after the blur event. The two events differ in that focusout bubbles, while blur does not.

The opposite of focusout is the focusin event, which fires when the element has received focus.

The focusout event is not cancelable.

Syntax

Use the event name in methods like addEventListener().

js
addEventListener("focusout", (event) => {});

Event type

Event properties

This interface also inherits properties from its parent UIEvent, and indirectly from Event.

FocusEvent.relatedTarget

The element receiving focus, if any.

Examples

Live example

HTML

html
<form id="form">
  <label>
    Some text:
    <input type="text" placeholder="text input" />
  </label>
  <label>
    Password:
    <input type="password" placeholder="password" />
  </label>
</form>

JavaScript

js
const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});

Result

Specifications

Specification
UI Events
# event-type-focusout

Note: The UI Events specification describes an order of focus events that's different from what current browsers implement.

Browser compatibility

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
focusout event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

See also