Master jQuery .blur() Method to Set Event Handler

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(() => {
    alert("Unselected!");
})

To trigger the event, follow this syntax:

$(selector).blur()

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.