jQuery Blur Event

What Is the blur Event?

The blur event fires when an element loses focus — Tab away, click elsewhere, or call .trigger("blur"). Bind with .on("blur", handler) (since jQuery 1.7). Originally for form fields; modern browsers also send it on other focusable elements.

$("#email").on("blur", function () {
  // user left this field
});

$("#email").trigger("blur");   // fire in code

// Opposite: focus = gains focus
// Bubbling sibling: focusout (use for delegation)
// Legacy shorthand: .blur() — prefer .on / .trigger

How to Use blur

Bind on the field that should react when focus leaves it.

1. Select the element ($("#email"), $("input.name"), …).
2. Call .on("blur", handler) — optional eventData before the handler.
3. In the handler, read this / $(this) for the field that lost focus.
4. To fire from a button or timer, use .trigger("blur").
5. For one handler on a form with many (or dynamic) fields, prefer focusout.

Pseudocode

element.on("blur", handler)

when element loses focus:
    // Tab away, click elsewhere, or trigger("blur")
    call handler(event)
    this = the element that lost focus

// Does NOT bubble — parent .on("blur", fn) won't see child blur
// For parent listening: use focusout instead

Cheat Sheet

Keep these facts handy while wiring form UX.

Live Preview

Focus the field, then leave it (Tab / click outside) or trigger blur from the button — same idea as the official jQuery API demos.

Waiting for blur…

jQuery Examples

Short, copy-ready snippets. Open DevTools, or use Try It Yourself for a live editor.

$("#target").on("blur", function () {
  $("#out").text("Handler for blur called.");
});

Handler for blur called.

$("#target").on("blur", function () {
  $("#out").text("blur handler ran");
});

$("#other").on("click", function () {
  $("#target").trigger("blur");
});

blur handler ran

$("#email").on("blur", function () {
  var value = $(this).val().trim();
  if (value === "") {
    $("#out").text("Email is required.");
  } else {
    $("#out").text("Looks good: " + value);
  }
});

Email is required.
— or —
Looks good: [email protected]

$("#name").on("blur", { field: "name" }, function (event) {
  $("#out").text(
    "Left " + event.data.field + ": " + $(this).val()
  );
});

Left name: Ada

$("#email").on("blur", function () {
  $("#out").append("blur on #email\n");
});

$("form").on("focusout", function (event) {
  $("#out").append(
    "focusout on form (from " + event.target.id + ")\n"
  );
});

blur on #email
focusout on form (from email)

Performance Notes

Blur handlers run only when focus moves. Keep them short — validate and update UI — and avoid network calls on every blur unless you debounce.

Key Takeaways