Code has been added to clipboard!

Master jQuery .blur() Method to Set Event Handler

Reading time 1 min
Published Dec 29, 2017
Updated Oct 9, 2019

jQuery blur: Main Tips

  • The jQuery .blur() event method attaches an event handler, invoked when the element loses focus, or triggers the blur event.
  • It is a shortcut of using either the .on() or .trigger() method with blur event as its first parameter.

.blur() Explained

The .blur() jQuery method attaches an event handler triggered when the element loses focus, or triggers the blur event. See the example below: after you enter something to one of the input fields, clicking outside it will cause the field to lose focus:

$("input").blur(() => {

To trigger the event, follow this syntax:


Use this syntax to attach an event handler:

$(selector).blur([eventData], handler)

The eventData is an object, containing data passed to the event handler. The event handler is simply a callback function.

Note: in the past, the blur jQuery event was only applied to form elements, but now it can be used on any element.

Latest Udacity Coupon Found:



Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 28/01/2021
3176 People Used
Only 97 Left