الفرق بين المراجعتين ل"jQuery/focusout"
Khaled-yassin (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:التابع <code>.focusout()</code>...') |
|||
| سطر 6: | سطر 6: | ||
=== الوصف === | === الوصف === | ||
| − | يربط هذا التابع دالة معالج الحدث بحدث "focusout " من JavaScript. | + | يربط هذا التابع دالة معالج الحدث بحدث <code>"focusout"</code> من JavaScript. |
=== <code>.focusout( handler )</code> === | === <code>.focusout( handler )</code> === | ||
| سطر 12: | سطر 12: | ||
==== <code>handler</code> ==== | ==== <code>handler</code> ==== | ||
| − | دالة على الشكل Function( Event eventObject ) | + | دالة على الشكل <code>[[JavaScript/Function|Function]]( [[JavaScript/Event|Event]] eventObject )</code>، تُنفَّذ في كل مرة يُطلَق فيها الحدث. |
=== <code>.focusout( [eventData ], handler )</code> === | === <code>.focusout( [eventData ], handler )</code> === | ||
| سطر 30: | سطر 30: | ||
يُعد هذا التابع اختصارًا للتابع <code>[[jQuery/on|.on( "focusout", handler )]]</code> عند تمرير الوسائط، والتابع <code>[[jQuery/trigger|.trigger( "focusout" )]]</code> عند عدم تمرير أية وسائط. | يُعد هذا التابع اختصارًا للتابع <code>[[jQuery/on|.on( "focusout", handler )]]</code> عند تمرير الوسائط، والتابع <code>[[jQuery/trigger|.trigger( "focusout" )]]</code> عند عدم تمرير أية وسائط. | ||
| − | يُرسَل الحدث <code>focusout</code> إلى عنصرٍ ما عندما يكون هو، أو أي عنصر داخله، يفقد التركيز. ويختلف هذا عن الحدث <code>[[jQuery/blur|blur]]</code> في أنه يدعم الكشف عن فقدان التركيز على العناصر السليلة (وبعبارة أخرى، فإنه يدعم | + | يُرسَل الحدث <code>focusout</code> إلى عنصرٍ ما عندما يكون هو، أو أي عنصر داخله، يفقد التركيز. ويختلف هذا عن الحدث <code>[[jQuery/blur|blur]]</code> في أنه يدعم الكشف عن فقدان التركيز على العناصر السليلة (وبعبارة أخرى، فإنه يدعم انتقال الأحداث [event bubbling]). |
من الممكن استخدام هذا الحدث مع حدث <code>[[jQuery/focusin|focusin]]</code>. | من الممكن استخدام هذا الحدث مع حدث <code>[[jQuery/focusin|focusin]]</code>. | ||
| سطر 38: | سطر 38: | ||
=== أمثلة === | === أمثلة === | ||
| − | مراقبة فقدان التركيز حين يحدث داخل الفقرات وملاحظة الفرق بين عدد <code>focusout</code> وعدد <code>[[jQuery/blur|blur]]</code>. (لا يتغير عدد <code>[[jQuery/blur|blur]]</code> لأن هذه الأحداث لا | + | مراقبة فقدان التركيز حين يحدث داخل الفقرات وملاحظة الفرق بين عدد مرات وقوع الحدث <code>focusout</code> وعدد مرات وقوع الحدث <code>[[jQuery/blur|blur]]</code>. (لا يتغير عدد مرات وقوع <code>[[jQuery/blur|blur]]</code> لأن هذه الأحداث لا تنتقل عبر شجرة DOM إلى العناصر الأب [أي event bubbling]):<syntaxhighlight lang="html"> |
| + | <!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> | ||
| + | </syntaxhighlight> | ||
== مصادر == | == مصادر == | ||
المراجعة الحالية بتاريخ 11:10، 29 مايو 2018
.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>