blur event

Categories: Events > Form Events | Forms
Bind an event handler to the "blur" event, or trigger that event on an element.

Contents:

.on( "blur" [, eventData ], handler )Returns: jQuery

Description: Bind an event handler to the "blur" event.

This page describes the blur event. For the deprecated .blur() method, see .blur().

The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.

For example, consider the HTML:

1
2
3
4
5
6
7
 
<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to the first input field:

1
2
3
 
$( "#target" ).on( "blur", function() {
  alert( "Handler for `blur` called." );
} );

Now if the first field has the focus, clicking elsewhere or tabbing away from it displays the alert:

Handler for `blur` called.

To trigger the event programmatically, call .trigger( "blur" ):

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

After this code executes, clicks on Trigger the handler will also alert the message.

The blur event does not bubble. As of version 1.4.2, jQuery works around this limitation by mapping blur to the focusout event in its event delegation methods.

The native blur event is asynchronous in all versions of IE, contrary to other browsers. To avoid issues related to this discrepancy, as of jQuery 3.7.0, jQuery uses focusout as the native backing event for blur in IE.

Example:

To trigger the blur event on all paragraphs:

1
 
$( "p" ).trigger( "blur" );