Element: focusout event

{{APIRef("UI Events")}}

The focusout event fires when an element has lost focus, after the {{domxref("Element/blur_event", "blur")}} event. The two events differ in that focusout bubbles, while blur does not.

The opposite of focusout is the {{domxref("Element/focusin_event", "focusin")}} event, which fires when the element has received focus.

The focusout event is not cancelable.

Syntax

Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}} , or set an event handler property.

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

onfocusout = (event) => { }

Event type

A {{domxref("FocusEvent")}} . Inherits from {{domxref("UIEvent")}} and {{domxref("Event")}} .

{{InheritanceDiagram("FocusEvent")}}

Event properties

This interface also inherits properties from its parent {{domxref("UIEvent")}} , and indirectly from {{domxref("Event")}} .

{{domxref("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

{{EmbedLiveSample("Live_example", '100%', '50px')}}

Specifications

{{Specifications}}

[!NOTE] The UI Events specification describes an order of focus events that’s different from what current browsers implement.

Browser compatibility

{{Compat}}

docs.rodeo

MDN Web Docs mirror