jQuery Focusout Event

What Is the focusout Event?

The focusout event fires when an element or any element inside it loses focus. Unlike blur, focusout bubbles — so one handler on a parent form can validate every nested input when the user leaves it.

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

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

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

How to Use focusout

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

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

Pseudocode

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

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

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

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

Cheat Sheet

Keep these facts handy when wiring leave-focus UX on forms.

Live Preview

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

Ready — leave 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 lose focus.

var focusout = 0, blur = 0;
$("p")
  .on("focusout", function () {
    focusout++;
    $("#out").text("focusout: " + focusout + "x | blur: " + blur + "x");
  })
  .on("blur", function () {
    blur++;
    $("#out").text("focusout: " + focusout + "x | blur: " + blur + "x");
  });

Leave nested input → focusout count rises
blur count on <p> stays 0 (does not bubble)

$("#signup-form").on("focusout", "input", function () {
  var name = $(this).attr("name") || "(unnamed)";
  var empty = $(this).val().trim().length === 0;
  $("#out").text(
    empty ? name + " is empty — please fill it in." : name + " looks OK."
  );
});

Leave empty email → "email is empty — please fill it in."
Leave filled name → "first looks OK."

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

Leave nested input
→ only "focusout on wrapper (runs)"
blur handler on #wrapper never fires

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

Leave city → "form=profile | left=city"
event.data.form is shared for every input

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

Tab into first → "Entered: first"
Tab to last → "Left: first" then "Entered: last"

Performance Notes

Delegation usually wins for forms: one listener instead of N. Keep leave handlers small — validate one field, update a short message.

Key Takeaways