Description: Bind an event handler to the "focusout" JavaScript event.
.focusout( handler(eventObject) )
version added: 1.4
handler(eventObject)
A function to execute each time the event is triggered.
.focusout( [ eventData ], handler(eventObject) )
version added: 1.4.3
eventData
A map of data that will be passed to the event handler.
handler(eventObject)
A function to execute each time the event is triggered.
This method is a shortcut for .bind('focusout', handler).
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 from parent elements (in other words, it supports event bubbling).
This event will likely be used together with the focusin event.
Example
Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count.Example - Full source:
Watch for a loss of focus to occur inside paragraphs and note the difference between the focusout count and the blur count.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.inputs { float: left; margin-right: 1em; }
.inputs p { margin-top: 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var fo = 0, b = 0;
$("p").focusout(function() {
fo++;
$("#fo")
.text("focusout fired: " + fo + "x");
}).blur(function() {
b++;
$("#b")
.text("blur fired: " + b + "x");
});
});
</script>
</head>
<body>
<div class="inputs">
<p>
<input type="text" /><br />
<input type="text" />
</p>
<p>
<input type="password" />
</p>
</div>
<div id="fo">focusout fire</div>
<div id="b">blur fire</div>
</body>
</html>
Was this information helpful?
