W3cubDocs

/Web APIs

Element: focusout event

Limited availability

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

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().

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

Note: There is no onfocusout event handler property for this event.

Event type

A FocusEvent. Inherits from UIEvent and Event.

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

<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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`focusout_event`	1 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	12 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	52 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	11.6	5	18 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	52 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	12.1	4.2	1.0 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	4.4 The `onfocusout` event handler property is not supported. To listen to this event, use `element.addEventListener('focusout', function() {});`.	4.2