jQuery Focusout Event

What You’ll Learn

The focusout event fires when an element loses focus — or when any element inside it loses focus. Unlike blur, it bubbles up the DOM, so one handler on a parent form can validate every nested input when the user tabs away. This tutorial covers .on("focusout"), eventData, delegation, comparison with blur and focusin, and the official jQuery focusout vs blur demo.

Introduction

Validating every field in a large form is tedious if you bind .on("blur", fn) on each input individually. The focusout event solves this: it fires when an element loses focus or when any descendant loses focus, and it bubbles up to parent nodes.

The official jQuery API recommends pairing focusout with focusin for enter/exit tracking on containers. Bind with .on("focusout") since 1.7. jQuery also uses focusout internally when you delegate .on("blur", "input", fn) since 1.4.2.

Understanding the focusout Event

The focusout event is sent to an element when it loses focus, or when any element inside of it loses focus. This is distinct from the blur event: blur fires only on the element that lost focus and does not bubble; focusout bubbles so parent containers can listen once for all nested fields.

When a user tabs out of an input inside a <form>, the browser fires blur on the input and focusout on the input, the form, and every ancestor up to the document. jQuery’s .on("focusout", "input", fn) on the form catches every current and future input without rebinding.

📝 Syntax

The modern jQuery API for the focusout event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("focusout" [, eventData ], handler) (since 1.7)

.on( "focusout" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time focusout fires: function( event ) { ... }.

2. Event delegation — .on("focusout", selector, handler)

$( "#form" ).on( "focusout", "input", function( event ) {
  // jQuery maps blur to focusout for delegation since 1.4.2
} );

Native blur does not bubble. jQuery’s delegated .on("blur", "input", fn) works because jQuery maps it to the bubbling focusout event internally since 1.4.2. Binding .on("focusout", ...) directly makes the bubbling behavior explicit in your code.

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

.trigger( "focusout" )

• Runs bound focusout handlers on the matched element.
• To move keyboard focus away, use .trigger("blur") — the browser fires both blur and focusout.
• Use .triggerHandler("focusout") to run handlers without bubbling side effects.

4. Unbind — .off("focusout" [, selector] [, handler])

$( "#target" ).off( "focusout" );              // remove all focusout handlers
$( "#form" ).off( "focusout", "input", fn );   // remove delegated handler

Official jQuery API example

var focusout = 0, blur = 0;

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

Return value

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

Examples Gallery

Example 1 is the official jQuery API focusout vs blur demo. Examples 2–5 cover form validation, blur vs focusout bubbling, eventData, and pairing focusin with focusout. Use the Try-it links to run each snippet in the browser.

var focusout = 0, blur = 0;

$( "p" )
  .on( "focusout", function() {
    focusout++;
    $( "#focus-count" ).text( "focusout fired: " + focusout + "x" );
  } )
  .on( "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

$( "#signup-form" ).on( "focusout", "input", function() {
  var $field = $( this );
  var empty = $field.val().trim().length === 0;
  $field.toggleClass( "required-missing", empty );
} );

Tab out of empty input → .required-missing added

Tab out of filled input → .required-missing removed

One binding on #signup-form — no per-input handlers

var log = [];

$( "#wrapper" ).on( "blur", function() {
  log.push( "blur on wrapper (will NOT run for nested input)" );
} );

$( "#wrapper" ).on( "focusout", function() {
  log.push( "focusout on wrapper (runs when input inside loses focus)" );
  $( "#out" ).text( log.join( " | " ) );
} );

Focus nested input, then tab away
→ only "focusout on wrapper" appears in #out

Direct .on("blur") on wrapper never fires for child input blur

$( "#profile-form" ).on( "focusout", { rule: "required" }, "input", function( event ) {
  var empty = $( this ).val().trim().length === 0;
  $( this ).toggleClass( "invalid", empty );
  $( "#out" ).text( "Left: " + $( this ).attr( "name" ) + " | rule: " + event.data.rule );
} );

Leave first name empty → .invalid added, #out shows rule

Fill email and tab away → .invalid removed

One { rule: "required" } object shared across all inputs

var $form = $( "#contact-form" );

$form.on( "focusin", "input", function() {
  $form.find( "input" ).removeClass( "active" );
  $( this ).addClass( "active" );
} );

$form.on( "focusout", "input", function() {
  $( this ).removeClass( "active" );
  var empty = $( this ).val().trim().length === 0;
  $( this ).toggleClass( "required-missing", empty );
} );

Tab into field → .active highlights current input

Tab out of empty field → .active removed, .required-missing added

Complete enter/exit UX with two bubbling handlers on one form

🚀 Common Use Cases

• Parent form validation — one .on("focusout", "input", fn) on the form validates every field on exit.
• Nested containers — official demo: bind on <p> to detect when any child input loses focus.
• Dynamic AJAX forms — fields added after load still trigger the same delegated focusout handler.
• Wizard steps — track which section the user finished editing via focusout on step containers.
• Pair with focusin — enter/exit styling on the same parent without per-field bindings.
• Force validation before submit — $("#email").trigger("blur") inside a submit handler fires focusout too.

📝 Notes

• Bind with .on("focusout", handler) since jQuery 1.7.
• Trigger with .trigger("focusout") since jQuery 1.0 — runs handlers; use .trigger("blur") to move keyboard focus away.
• Native focusout bubbles — ideal for parent-level and delegated handlers.
• Native blur does not bubble — bind directly on the input for single-field handlers.
• jQuery maps delegated .on("blur", selector, fn) to focusout since 1.4.2.
• Pair with focusin on the same parent for complete enter/exit tracking.
• Use .triggerHandler("focusout") to run handlers without bubbling propagation.
• Use .off("focusout") to remove handlers — avoid deprecated .unbind("focusout").

💡 Best Practices