jQuery .blur() Method

What You’ll Learn

The .blur() method is jQuery’s legacy shorthand for binding and triggering the blur event. This tutorial covers .blur(handler) since 1.0, .blur(eventData, handler) since 1.4.3, no-argument .blur() as a trigger, migration to .on("blur") and .trigger("blur"), and why the binding form is deprecated since jQuery 3.3. For the modern blur event API, see the jQuery blur event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .blur(), .focus(), .change(), and more. The .blur() method let you validate a field in one short call: $("#email").blur(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .blur() matters when reading older form-validation tutorials and legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("blur", handler) for binding and .trigger("blur") for firing.

Understanding the .blur() Method

The official jQuery API describes .blur() as a way to bind an event handler to the blur event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the user tabs away, clicks elsewhere, or focus moves programmatically — the same blur event that .on("blur") handles today.

When you call .blur() with no arguments, jQuery synthetically fires the blur event on each matched element. Bound handlers run — useful for forcing validation before form submit when the user never tabbed out of the active field. This trigger behavior is equivalent to .trigger("blur").

📝 Syntax

The .blur() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("blur") is preferred:

1. Bind a handler — .blur( handler ) (since 1.0, deprecated 3.3)

.blur( handler )

• handler — function executed each time blur fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "blur", handler ).

2. Bind with eventData — .blur( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.blur( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "blur", eventData, handler ).

3. Trigger the event — .blur() (since 1.0)

.blur()

• No arguments — triggers blur on every matched element.
• Runs bound blur handlers.
• Preferred replacement: .trigger( "blur" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).blur( function() {
  alert( "Handler for `blur` called." );
} );

// Modern binding
$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

// Deprecated trigger
$( "#target" ).blur();

// Modern trigger
$( "#target" ).trigger( "blur" );

Return value

• All .blur() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .blur() to .on("blur"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .blur(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

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

User focuses #target, then tabs away or clicks elsewhere
→ handler runs, #out text updates

Deprecated — prefer .on("blur", fn) for new code

$( ".field" ).blur( { rule: "required" }, function( event ) {
  var name = $( this ).attr( "name" );
  var empty = $( this ).val().trim().length === 0;
  $( "#out" ).text(
    name + " | rule: " + event.data.rule + " | empty: " + empty
  );
} );

Tab out of empty email field → "email | rule: required | empty: true"

Tab out of filled name field → "name | rule: required | empty: false"

Same handler, shared eventData on every .field input

var count = 0;

$( "#target" ).blur( function() {
  count++;
  $( "#out" ).text( "Target blur handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#target" ).blur();
} );

Tab away from #target → count increments

Click #fire → $("#target").blur() → same handler runs

No-arg .blur() is trigger shorthand — prefer .trigger("blur")

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

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

Tab out of #legacy → legacy deprecation message

Tab out of #modern → modern .on("blur") message

Behavior is identical — only the API name differs

$( "#email" )
  .blur( function() {
    var val = $( this ).val().trim();
    $( this ).val( val );
    $( "#out" ).text( "Trimmed on blur: " + val );
  } )
  .blur( function() {
    $( this ).toggleClass( "touched", true );
  } );

User types "  jane@example.com  " and tabs away

First handler trims value → "jane@example.com"

Second handler adds .touched class

Both handlers run in bind order on each blur

🚀 Common Use Cases

• Reading legacy code — recognize $("#email").blur(fn) as equivalent to .on("blur", fn) in older form scripts.
• Field validation — legacy tutorials bind .blur() to validate email or required fields when the user tabs away.
• Force validation on submit — $("#active-field").blur() before checking the form — replace with .trigger("blur").
• Shared eventData — $(".field").blur({ rule: "email" }, fn) passes validation metadata without closures.
• Trim on exit — chained .blur(fn) calls trim whitespace and mark fields as touched.
• Maintaining WordPress themes — many admin and front-end scripts still use .blur() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .blur(handler) or .blur(eventData, handler) in new code. Use .on("blur") instead.
• Bind with .blur(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .blur() triggers the event since jQuery 1.0 — prefer .trigger("blur").
• .blur() does not support event delegation — use .on("blur", selector, fn) or .on("focusout", selector, fn) for dynamic forms.
• Native blur does not bubble — parent-level handlers need focusout, not direct .blur(fn) on the form.
• Remove handlers with .off("blur") — not by calling .blur(undefined).
• For the full modern blur event guide — delegation, focusout, and validation patterns — see the jQuery blur event tutorial.

💡 Best Practices