jQuery Focusin Event

What Is the focusin Event?

The focusin event fires when an element or any element inside it gains focus. Unlike focus, focusin bubbles — so one handler on a parent form can cover every nested input, including fields added later.

// Parent form — one handler for all inputs
$("#form").on("focusin", "input", function () {
  // a nested input gained focus
});

// focus does NOT bubble; focusin does
$("#wrapper").on("focus", fn);    // misses child focus
$("#wrapper").on("focusin", fn);  // runs for child focus

// Pair with focusout for enter/exit
$("#form").on("focusout", "input", handler);

How to Use focusin

Bind on a parent, filter with a selector, and react when any nested field gains focus.

1. Bind with .on("focusin", handler) on a parent, or .on("focusin", "input", handler) for delegation.
2. Optionally pass eventData: .on("focusin", data, handler).
3. Inside the handler, use event.target or $(this) (delegated) for the focused control.
4. Pair with focusout when you need enter and exit on the same parent.
5. To move keyboard focus, call .trigger("focus") on the input — not only focusin.

Pseudocode

call parent.on("focusin", "input", handler)
    → store delegated handler on parent

when user focuses a nested input:
    fire "focus" on the input (does not bubble)
    fire "focusin" on the input
    focusin bubbles → reaches parent
    if target matches "input":
        call handler(event)
        this → the input (delegated)

call parent.on("focus", handler)
    → never runs for nested input focus
      (focus does not bubble)

to migrate shorthand:
    .focusin(fn) → .on("focusin", fn)
    .focusin()   → .trigger("focusin")

Cheat Sheet

Keep these facts handy when wiring bubbling focus UX.

Live Preview

Tab into nested fields. The form listens with .on("focusin", "input", …) — one handler covers every input.

Ready — focus a field or pick an action.

jQuery Examples

Short, copy-ready snippets based on the official jQuery API idea — listen on a parent when nested controls gain focus.

$("p").on("focusin", function () {
  var label = $(this).find("label").text() || "field";
  $("#out").text("focusin on parent <p> — nested " + label.trim());
});

Focus an input inside a <p>
Handler runs on that paragraph (bubbling)

$("#signup-form").on("focusin", "input", function () {
  $("#out").text("Active field: " + ($(this).attr("name") || "(unnamed)"));
});

Tab into first → "Active field: first"
Tab into email → "Active field: email"

var log = [];
$("#wrapper").on("focus", function () {
  log.push("focus on wrapper (will NOT run)");
});
$("#wrapper").on("focusin", function () {
  log.push("focusin on wrapper (runs)");
  $("#out").text(log.join(" | "));
});

Focus nested input
→ only "focusin on wrapper (runs)"
focus handler on #wrapper never fires

$("#profile").on("focusin", "input", { form: "profile" }, function (event) {
  $("#out").text(
    "form=" + event.data.form + " | field=" + $(this).attr("name")
  );
});

Focus city → "form=profile | field=city"
event.data.form is shared for every input

$("#signup-form").on("focusin", "input", function () {
  $("#out").text("Active: " + ($(this).attr("name") || "(unnamed)"));
});

$("#add").on("click", function () {
  $("#extra").append('
Extra 
');
});

Click Add → new input appears
Focus new field → "Active: extra"
No re-bind needed

Performance Notes

Delegation usually wins for forms: one listener instead of N. Keep the callback small — update a label or toggle a class.

Key Takeaways