التابع .focusout() في jQuery
.focusout( handler )
القيمة المعادة
يُعيد كائنًا من النوع jQuery.
الوصف
يربط هذا التابع دالة معالج الحدث بحدث "focusout" من JavaScript.
.focusout( handler )
أُضيف مع الإصدار: 1.4.
handler
دالة على الشكل Function( Event eventObject )، تُنفَّذ في كل مرة يُطلَق فيها الحدث.
.focusout( [eventData ], handler )
أُضيف مع الإصدار: 1.4.3.
eventData
كائن يحتوي على البيانات التي ستُمرر إلى معالج الحدث، ويمكن أن يكون من أي نوع من أنواع JavaScript.
handler
دالة على الشكل Function( Event eventObject )، تُنفَّذ في كل مرة يُطلَق فيها الحدث.
.focusout()
أُضيف مع الإصدار: 1.0.
لا يقبل هذا الشكل أي وسائط.
يُعد هذا التابع اختصارًا للتابع .on( "focusout", handler ) عند تمرير الوسائط، والتابع .trigger( "focusout" ) عند عدم تمرير أية وسائط.
يُرسَل الحدث focusout إلى عنصرٍ ما عندما يكون هو، أو أي عنصر داخله، يفقد التركيز. ويختلف هذا عن الحدث blur في أنه يدعم الكشف عن فقدان التركيز على العناصر السليلة (وبعبارة أخرى، فإنه يدعم انتقال الأحداث [event bubbling]).
من الممكن استخدام هذا الحدث مع حدث focusin.
ملاحظات إضافية
لما كان التابع .focusout() هو مجرد اختصار للتابع .on( "focusout", handler )، فإن فك الارتباط ممكن باستخدام .off( "focusout" ).
أمثلة
مراقبة فقدان التركيز حين يحدث داخل الفقرات وملاحظة الفرق بين عدد مرات وقوع الحدث focusout وعدد مرات وقوع الحدث blur. (لا يتغير عدد مرات وقوع blur لأن هذه الأحداث لا تنتقل عبر شجرة DOM إلى العناصر الأب [أي event bubbling]):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>focusout demo</title>
<style>
.inputs {
float: left;
margin-right: 1em;
}
.inputs p {
margin-top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<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>
<script>
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" );
});
</script>
</body>
</html>