jQuery .focusOut(): Add Event Handlers to the focusOut Event

jQuery focusOut: Main Tips

• The jQuery .focusOut() is a shorthand for .on() with focusOut as the event parameter.
• This method binds an event handler to a focusOut event, invoked when the specified element or its children in jQuery lose focus.

Usage of .focusOut()

A jQuery focusOut event fires when an element or its descendants in jQuery lose focus. The .focusOut() method adds an event handler to the focusOut event.

In the example below, you will see no changes as you select an input field. However, when you click somewhere else, the field loses focus and changes its color:

To specify a function to be run when the specified element or its children lose focus, use this syntax:

$("selector").focusout(function)

.focusOut() vs. .blur()

Beginners sometimes confuse jQuery focusOut and blur events, since both of them fire when an element in jQuery loses focus.

If the element has no descendants, there is actually no difference between the two events. However, if there are children elements and they lose focus, the focusOut event will fire, and blur will not.

Note: if you don't specify any parameters, the method will simply trigger the event.