🔥 $100K Hit! Where Will Bitcoin Go Next? Find Out Live!

Code has been added to clipboard!

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

Reading time 1 min
Published Jul 3, 2019
Updated Sep 30, 2019

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.
DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

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.