jQuery .focusout() Method

What You’ll Learn

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

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .focusout(), .focus(), .blur(), and more. The .focusout() method let you react when focus leaves an element or any descendant in one call: $("#form").focusout(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

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

Understanding the .focusout() Method

The official jQuery API describes .focusout() as a way to bind an event handler to the focusout 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 element or any nested descendant loses focus — the bubbling focusout event that .on("focusout") handles today.

When you call .focusout() with no arguments, jQuery synthetically fires the focusout event on each matched element. Bound handlers run — useful for forcing validation before submit. To move keyboard focus away from an input, use .trigger("blur") instead; the browser fires both blur and focusout automatically.

📝 Syntax

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

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

.focusout( handler )

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

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

.focusout( [eventData], handler )

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

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

.focusout()

• No arguments — triggers focusout on every matched element.
• Runs bound focusout handlers (including on ancestors when bubbled).
• To move keyboard focus, use .trigger("focus") on the target input.
• Preferred replacement: .trigger( "focusout" ).

Official jQuery API migration note

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

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

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

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

Return value

• All .focusout() 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 .focusout() to .on("focusout"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .focusout(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

var focusout = 0, blur = 0;

$( "p" )
  .focusout( function() {
    focusout++;
    $( "#focus-count" ).text( "focusout fired: " + focusout + "x" );
  } )
  .blur( function() {
    blur++;
    $( "#blur-count" ).text( "blur fired: " + blur + "x" );
  } );

Tab into input inside a <p>, then tab away
→ focusout counter increases (event bubbled to <p>)

blur counter stays at 0 — blur on <p> never fires for nested input

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

$( "#profile-form" ).focusout( { rule: "required" }, function( event ) {
  if ( $( event.target ).is( "input" ) ) {
    var empty = $( event.target ).val().trim().length === 0;
    $( event.target ).toggleClass( "required-missing", empty );
  }
  $( "#out" ).text( "Focusout on form | rule: " + event.data.rule );
} );

Tab out of any input inside #profile-form
→ empty inputs get .required-missing, #out shows rule

event.data.rule shared via one .focusout() on the form

Modern equivalent: .on("focusout", { rule: "required" }, fn)

var count = 0;

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

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

Tab out of #target → count increments

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

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

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

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

Tab out of #legacy → legacy deprecation message

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

Behavior is identical — only the API name differs

$( "#form" )
  .focusout( function( event ) {
    if ( $( event.target ).is( "input" ) ) {
      var empty = $( event.target ).val().trim().length === 0;
      $( event.target ).toggleClass( "required-missing", empty );
      $( "#hint" ).text( empty ? "Field left empty." : "Field OK." ).show();
    }
  } )
  .focusout( function( event ) {
    if ( $( event.target ).is( "input" ) ) {
      $( event.target ).addClass( "touched" );
    }
  } );

User tabs out of an input inside #form

First handler marks empty fields with .required-missing

Second handler adds .touched class

Both handlers run in bind order on each focusout

🚀 Common Use Cases

• Reading legacy code — recognize $("#form").focusout(fn) as equivalent to .on("focusout", fn) in older form scripts.
• Parent paragraph handler — legacy code binds $("p").focusout(fn) to react when nested inputs lose focus.
• Form container binding — $("#form").focusout(fn) validates fields on exit without per-input bindings.
• Shared eventData — $("#form").focusout({ rule: "required" }, fn) passes config to one parent handler.
• Chained handlers — stacked .focusout(fn) calls validate and mark .touched on the form.
• Maintaining WordPress themes — many admin and front-end scripts still use .focusout() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .focusout(handler) or .focusout(eventData, handler) in new code. Use .on("focusout") instead.
• Bind with .focusout(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .focusout() triggers the event since jQuery 1.0 — prefer .trigger("focusout").
• .focusout(handler) binds on matched elements — for selector filtering use .on("focusout", "input", fn).
• Native focusout bubbles — that is why parent .focusout(fn) catches nested input blur.
• Pair with focusin on the same parent for complete enter/exit tracking.
• Remove handlers with .off("focusout") — not by calling .focusout(undefined).
• For the full modern focusout event guide — delegation and dynamic forms — see the jQuery focusout event tutorial.

💡 Best Practices