Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("focusout", (event) => { })
onfocusout = (event) => { }

Event type

A FocusEvent. Inherits from UIEvent and Event.

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

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

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on Jul 28, 2026 by MDN contributors.