jQuery .blur() Method

What Is .blur()?

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

// Legacy (still works; bind form deprecated since 3.3)
$("#email").blur(function () {
  // field lost focus
});

// Modern replacements
$("#email").on("blur", handler);   // bind
$("#email").trigger("blur");       // fire

// No-arg .blur() = trigger (prefer .trigger("blur"))
$("#email").blur();

How to Use .blur()

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

1. Bind with .blur(handler) (legacy) or .on("blur", handler) (preferred).
2. Optionally pass eventData: .blur(data, handler) → .on("blur", data, handler).
3. Trigger with no-arg .blur() (legacy) or .trigger("blur") (preferred).
4. In the handler, use this / $(this) for the field that lost focus.
5. For form-level or dynamic fields, use focusout — .blur() does not bubble or delegate.

Pseudocode

// Legacy
call element.blur(handler)
    → bind "blur" on element

call element.blur()
    → trigger "blur" on element

// Modern (jQuery 1.7+)
call element.on("blur", handler)
when element loses focus (Tab, click elsewhere, or trigger):
    fire "blur" on element
    call handler(event)

// Does NOT bubble — parent .blur(fn) won't see child blur

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

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Focus the field, then leave it — or fire blur from the button. The demo uses legacy .blur() so you can see bind vs trigger.

Waiting for blur…

jQuery Examples

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

$("#target").blur(function () {
  $("#out").text("Handler ran via .blur(fn).");
});

Handler ran via .blur(fn).

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

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

blur handler ran

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

Left name: Ada

$("#email").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]

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

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

Leave #legacy → legacy deprecation message
Leave #modern → modern .on("blur") message
Behavior is the same — API name differs

Performance Notes

The shorthand and .on("blur") cost the same for a single bind. Prefer .on() for clarity and delegation. Keep the callback light — validate and update UI, then stop.

Key Takeaways