jQuery .focusout() Method

What Is .focusout()?

.focusout() is jQuery’s legacy shorthand for binding or triggering the bubbling focusout event — when an element or a descendant loses focus. Binding is deprecated since 3.3; modern code uses .on("focusout") / .trigger("focusout").

// Legacy (still works; bind form deprecated since 3.3)
$("p").focusout(function () {
  // this <p> or a nested input lost focus
});

// Modern replacements
$("p").on("focusout", handler);     // bind
$("p").trigger("focusout");         // fire handlers

// Better for dynamic forms (delegation)
$("#form").on("focusout", "input", handler);

How to Use .focusout()

Recognize the legacy API in old code, then migrate to .on() / .trigger().

1. Bind with .focusout(handler) (legacy) or .on("focusout", handler) (preferred).
2. Optionally pass eventData: .focusout(data, handler) → .on("focusout", data, handler).
3. Trigger with no-arg .focusout() (legacy) or .trigger("focusout") (preferred).
4. Bind on a parent to catch nested input leave (bubbling).
5. For dynamic fields, use delegated .on("focusout", selector, fn) — not .focusout().

Pseudocode

// Legacy
call parent.focusout(handler)
    → bind "focusout" on parent

when nested input loses focus:
    fire "focusout" on input
    event bubbles to parent
    call handler(event)

call parent.focusout()
    → trigger "focusout" on parent (handlers only)

// Modern
call parent.on("focusout", handler)
// or with delegation for dynamic fields:
call parent.on("focusout", "input", handler)

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

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Leave nested fields. The form uses legacy .focusout(handler) (still available in jQuery 3.x).

Ready — leave a field or pick an action.

jQuery Examples

Short, copy-ready snippets. Prefer .on("focusout") for new projects; these demos show the legacy API you will still meet in older code.

$("p").focusout(function () {
  var label = $(this).find("label").text() || "field";
  $("#out").text("focusout via .focusout(fn) — " + label.trim());
});

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

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

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

$("#box").focusout(function () {
  $("#out").text("focusout handler fired on #box.");
});

$("#fire").on("click", function () {
  $("#box").focusout(); // prefer .trigger("focusout")
});

Click #fire → no-arg .focusout() runs
Bound handler updates #out
Keyboard focus may stay on the button

$("#legacy").focusout(function () {
  $("#out").text("Legacy: .focusout(fn) — deprecated since 3.3.");
});

$("#modern").on("focusout", function () {
  $("#out").text("Modern: .on('focusout', fn) — use this for new code.");
});

Leave inside #legacy → legacy message
Leave inside #modern → modern message
Behavior is the same — API name differs

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

Leave nested input
→ only "focusout on wrapper (runs)"
.parent .blur(fn) never fires

Performance Notes

The shorthand and .on("focusout") cost the same for a single bind. Prefer .on() for clarity and delegation. Keep leave callbacks light.

Key Takeaways