Element: focusout event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Learn more
See full compatibility

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(), or set an event handler property.

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

onfocusout = (event) => { }

Event type

A FocusEvent. Inherits from UIEvent and Event.

Event UIEvent FocusEvent

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 = "";
});