JavaScript Element focusout Event

What You’ll Learn

The focusout event fires after blur when an element loses focus—and unlike blur, it bubbles. Learn onfocusout, form cleanup, relatedTarget, the focusin pair, and five try-it labs.

Introduction

blur is perfect when you attach a listener directly to one control. When you want one listener on a form or dialog to react to every child that loses focus, focusout is the event designed for that job because it bubbles.

It fires after blur. Its opposite is focusin (which bubbles after focus). MDN marks focusout as Limited availability (not Baseline)—still widely useful, but always verify support for your audience.

Understanding focusout

An instance event that answers: “Did this element (or a descendant) just lose focus?” when you listen on an ancestor.

• Fires after blur when an element loses focus.
• Bubbles — ideal for event delegation on forms and containers.
• Not cancelable — you cannot keep focus by calling preventDefault().
• FocusEvent — relatedTarget is the element receiving focus (if any).
• Handler — onfocusout or addEventListener("focusout", ...).
• Limited availability on MDN (not Baseline)—test carefully.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

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

onfocusout = (event) => { };

Event type

A FocusEvent (inherits from UIEvent and Event).

Handy properties

🔁 Event Order (A → B)

When focus moves from element A to element B, browsers typically dispatch:

1. blur on A
2. focusout on A (bubbles)
3. focus on B
4. focusin on B (bubbles)

So cleanup for A usually happens before setup for B. MDN notes that the UI Events specification describes an order that can differ from what current browsers implement—avoid fragile assumptions beyond this common pattern.

⚖️ focusout vs blur

Examples Gallery

Examples follow MDN Element: focusout event. Tab or click between fields to trigger focusout.

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

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

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

Focused control turns pink; focusout restores the default background.

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

form.onfocusout = (event) => {
  out.textContent =
    "focusout from " + (event.target.name || event.target.tagName);
};

focusout from email

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

form.addEventListener("blur", () => {
  out.textContent += "parent blur (bubble)\n";
});

form.addEventListener("focusout", (event) => {
  out.textContent +=
    "parent focusout ← " + (event.target.name || event.target.tagName) + "\n";
});

parent focusout ← text
(parent blur bubble line usually missing)

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

form.addEventListener("focusout", (event) => {
  const to = event.relatedTarget
    ? event.relatedTarget.name || event.relatedTarget.id || event.relatedTarget.tagName
    : "(none)";
  out.textContent =
    "left " +
    (event.target.name || event.target.tagName) +
    " → relatedTarget=" +
    to;
});

left text → relatedTarget=password

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

form.addEventListener("focusout", (event) => {
  const el = event.target;
  if (!(el instanceof HTMLInputElement)) return;
  if (el.required && !el.value.trim()) {
    msg.textContent = el.name + " is required";
    el.style.outline = "2px solid tomato";
  } else {
    msg.textContent = "";
    el.style.outline = "";
  }
});

email is required

🚀 Common Use Cases

• Clear focus highlights when any field inside a form blurs.
• Hide contextual help that was shown on focusin.
• Run soft validation when the user leaves a control.
• Track focus exits for analytics or accessibility demos.
• Teach event bubbling vs the non-bubbling blur event.

🔧 How It Works

📝 Notes

• MDN: Limited availability (not Baseline)—test the browsers you support.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• focusout bubbles; blur does not.
• The event is not cancelable.
• Related learning: focusin, focus, fullscreenchange, addEventListener(), JavaScript hub.

💡 Best Practices