JavaScript Element focusout Event

Beginner

5 min read

Updated: Nov 2026

3 examples

Event

Definition

In JavaScript, the focusout event fires when an element has lost focus, after the blur event (MDN). The two differ in that focusout bubbles, while blur does not. The opposite is focusin. The event object is a FocusEvent.

Syntax

Listen for focusout. Start with this line.

JavaScript

el.addEventListener("focusout", fn)

Call	What it does
`el.addEventListener("focusout", fn)`	Primary signature.

Built into the browser. Listen with el.addEventListener("focusout", …) — no import required.

Library declarations

JavaScript

el.addEventListener("focusout", fn)

Parameters

Parameter	Description
FocusEvent	Required. Carries target and relatedTarget
Focusable control	Required. Input, button, link with tabindex, etc.
focusin	Optional. Setup when focus arrives

Return Value

Return Value	Description
*	Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Form Cleanup (MDN)

Highlight on focusin; clear on focusout when focus leaves.

JavaScript

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

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

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

Try It Yourself

How It Works

Listen on the form. Bubbling delivers child leave-focus events here.
Highlight on focusin. Mark the control that gained focus.
Clear on focusout. event.target is the control that just lost focus.
One pair covers all fields. No per-input listeners required.

Example 2 — `blur` vs `focusout`

Show why a parent blur listener misses nested controls.

JavaScript

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

form.addEventListener("blur", () => {
  console.log("blur on form (rare for child inputs)");
});

form.addEventListener("focusout", (event) => {
  console.log("focusout →", event.target.tagName);
});

Try It Yourself

How It Works

Attach both on the form. Same parent, different event types.
Leave a child input. blur on the form usually does not run (no bubble).
focusout does run. It bubbles from the input to the form.
Use focusout for delegation. Prefer it when one parent watches many controls leave focus.

Example 3 — Read `relatedTarget`

See which element is gaining focus when another control loses it.

JavaScript

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

form.addEventListener("focusout", (event) => {
  const next = event.relatedTarget;
  console.log(
    "from:", event.target.name || event.target.tagName,
    "to:", next ? (next.name || next.tagName) : null
  );
});

Try It Yourself

How It Works

FocusEvent.relatedTarget. For focusout, this is the element receiving focus (if any).
Tab between fields. to becomes the next control.
Click outside the page. relatedTarget may be null.
Use carefully. Always null-check before reading properties.

Compatibility

Browser Support

Element focusout is a standard UI Events focus event. MDN marks it Baseline Widely available since March 2017 — safe for everyday use in modern browsers.

✓ Baseline Widely available

Element focusout

Bubbling FocusEvent after blur — ideal for form-wide leave-focus cleanup.

Wide Baseline

Google Chrome Supported · Desktop & Mobile

Full support

Mozilla Firefox Supported · Desktop & Mobile

Full support

Apple Safari Supported · macOS & iOS

Full support

Microsoft Edge Supported · Chromium

Full support

Internet Explorer No native support · Use a polyfill

Polyfill

Opera Supported · Modern versions

Full support

Samsung Internet Supported · Android

Full support

Android WebView Supported · Modern WebView

Full support

focusout Widely available

Bottom line: Prefer focusout for parent delegation. Use blur when you only care about that element. Pair with focusin for enter/leave UI.

Frequently Asked Questions

What is the focusout event?

It fires when an element has lost focus, after the blur event (MDN). Unlike blur, focusout bubbles, so you can listen on a parent and still hear when child controls lose focus.

Is focusout deprecated or experimental?

No. MDN marks Element focusout as Baseline Widely available (since March 2017). It is not Deprecated, Experimental, or Non-standard.

How is focusout different from blur?

Both fire when an element loses focus. blur does not bubble; focusout does, and it fires after blur. For form-wide cleanup, focusout is usually simpler.

What event type is it?

A FocusEvent (inherits from UIEvent and Event). relatedTarget is the element that is receiving focus, if any.

Is focusout cancelable?

No. MDN states the focusout event is not cancelable.

What is the opposite of focusout?

focusin — it fires when the element receives focus (after focus) and also bubbles.

Next: fullscreenchange

Learn when an element enters or exits fullscreen mode.

fullscreenchange tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Element focusin Event JavaScript Element fullscreenchange Event

JavaScript Element focusout Event

Definition

Syntax

Parameters

Return Value

JavaScript Examples

Example 1 — Form Cleanup (MDN)

How It Works

Example 2 — blur vs focusout

How It Works

Example 3 — Read relatedTarget

How It Works

Browser Support

Element focusout

Frequently Asked Questions

Related Topics

focusin

blur

focus

activeElement

FocusEvent

Next: fullscreenchange

About the author

Example 2 — `blur` vs `focusout`

Example 3 — Read `relatedTarget`