.focusout()

Bind an event handler to the "focusout" JavaScript event.

.focusout(function(eventObjectEvent))🡢 jQuery

function(eventObjectEvent) FunctionA function to execute each time the event is triggered.

.focusout(eventData, function(eventObjectEvent))🡢 jQuery

eventData AnythingAn object containing data that will be passed to the event handler.
function(eventObjectEvent) FunctionA function to execute each time the event is triggered.

.focusout()🡢 jQuery

This method is a shortcut for .on( "focusout", handler ) when passed arguments, and .trigger( "focusout" ) when no arguments are passed.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

This event will likely be used together with the focusin event.

Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count. (The blur count does not change because those events do not bubble.)

JS
<div class="inputs">
  <p>
    <input type="text" /><br />
    <input type="text" />
  </p>
  <p>
    <input type="password" />
  </p>
</div>
<div id="focus-count">focusout fire</div>
<div id="blur-count">blur fire</div>
CSS
.inputs {
  float: left;
  margin-right: 1em;
}
.inputs p {
  margin-top: 0;
}
HTML
var focus = 0,
  blur = 0;
$("p")
  .focusout(function () {
    focus++;
    $("#focus-count").text("focusout fired: " + focus + "x");
  })
  .blur(function () {
    blur++;
    $("#blur-count").text("blur fired: " + blur + "x");
  });
DEMO

Looking for a Web Developer?

👋

Hi! I'm Basti, author of this site. If you are looking for a web developer with 15+ years of experience, holla at me!

Be it the good 'ol jQuery, vanilla JS or modern frameworks like Vue and Svelte, front- or backend, I can help you.

Just write me at jobs@jqapi.com :)