JavaScript Element focusin Event

What You’ll Learn

The focusin event fires after focus when an element receives focus—and unlike focus, it bubbles. Learn onfocusin, form delegation, relatedTarget, the focusout pair, and five try-it labs.

Introduction

focus 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 gains focus, focusin is the event designed for that job because it bubbles.

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

Understanding focusin

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

• Fires after focus when an element receives focus.
• Bubbles — ideal for event delegation on forms and containers.
• Not cancelable — preventDefault() does not block focusing.
• FocusEvent — relatedTarget is the element losing focus (if any).
• Handler — onfocusin or addEventListener("focusin", ...).
• Limited availability on MDN (not Baseline)—test carefully.

📝 Syntax

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

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

onfocusin = (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)

MDN notes that the UI Events specification describes an order that can differ from what current browsers implement—write code that does not depend on fragile interleaving details beyond this common pattern.

⚖️ focusin vs focus

Examples Gallery

Examples follow MDN Element: focusin event. Tab or click into fields inside the demos.

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

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

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

Focused control background becomes pink; focusout restores the default.

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

form.onfocusin = (event) => {
  out.textContent = "focusin on " + (event.target.name || event.target.tagName);
};

form.onfocusout = () => {
  out.textContent = "(no field focused)";
};

focusin on email

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

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

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

parent focusin → text
(parent focus bubble line usually missing)

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

form.addEventListener("focusin", (event) => {
  const from = event.relatedTarget
    ? event.relatedTarget.name || event.relatedTarget.id || event.relatedTarget.tagName
    : "(none)";
  out.textContent =
    "focusin on " +
    (event.target.name || event.target.tagName) +
    " · relatedTarget=" +
    from;
});

focusin on password · relatedTarget=text

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

form.addEventListener("focusin", (event) => {
  if (!(event.target instanceof HTMLInputElement)) return;
  status.textContent = "Active: " + (event.target.name || event.target.type);
});

form.addEventListener("focusout", () => {
  status.textContent = "Active: (none)";
});

Active: password

🚀 Common Use Cases

• Highlight any focused control inside a form with one listener.
• Show field-level help based on event.target.
• Track the active field for analytics or accessibility demos.
• Style an entire card / step when focus enters its subtree.
• Teach event bubbling vs the non-bubbling focus 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.
• focusin bubbles; focus does not.
• The event is not cancelable.
• Related learning: focus, focusout, addEventListener(), JavaScript hub.

💡 Best Practices