التابع ‎‎.blur()‎‎‎ في jQuery

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث

‎.blur( handler )‎

القيمة المعادة

كائن jQuery.

الوصف

يُستخدَم التابع ‎.blur()‎ في ربط مُعالِج أحداث (event handler) إلى حدث الضّبابيّة ‎(blur)‎ في JavaScript، أو إطلاق هذا الحدث على عنصر ما.

‎.blur( handler )‎

أضيفت في الإصدار: 1.0.

handler

دالة على الشكل ‎Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.

‎.blur( [eventData ], handler )‎

أضيفت في الإصدار: 1.4.3.

eventData

أي شيء (وهو نوع افتراضي مُستخدَم في jQuery للإشارة إلى إمكانيّة استخدام أي نوع)، ويُمثِّل كائن يحتوي على البيانات التي ستُمرَّر إلى مُعالِج الأحداث.

handler

دالة على الشكل ‎Function( Event eventObject )‎، وتُمثِّل الدالة التي ستُنفَّذ في كل مرة يُطلَق فيها الحدث.

‎.blur()‎

أضيفت في الإصدار: 1.0.

لا يقبل هذا الشكل من التّابع أيّة وسائط.

يُعدُّ هذا التّابع اختصارًا للتابع ‎.on( "blur", handler )‎ في أول شكلين له، وللتّابع ‎.trigger( "blur" )‎ في شكله الثّالث.

يُرسَل الحدث blur إلى العنصر عندما يفقد التركيز عنه، وكان يُطبَّق أصلًا فقط على عناصر حقول الإدخال مثل ‎<input>‎، ولكن في المتصفّحات الحديثة توسّع مجال هذا الحدث ليشمل كافّة أنواع العناصر، حيث يُمكِن للعنصر أن يفقد التركيز عنه عبر أوامر لوحة المفاتيح مثل زر Tab أو عن طريق النقر على الفأرة في مكان آخر من الصفحة.

لنأخذ مثال HTML التّالي:

<form>
  <input id="target" type="text" value="Field 1">
  <input type="text" value="Field 2">
</form>
<div id="other">
  إطلاق مُعالِج الحدث
</div>

<script>
// يُمكِن ربط مُعالِج الحدث إلى أول حقل دخل
$( "#target" ).blur(function() {
  alert( "استُدعي مُعالِج الحدث للتابع .blur()" );
});
</script>

إن فقد الآن الحقل الأول التركيز عنه عن طريق الضغط في أي مكان آخر من الصفحة أو باستخدام زر Tab، فستُعرَض رسالة التنبيه التالية:

استُدعي مُعالِج الحدث للتابع ‎.blur()‎

لإطلاق الحدث برمجيًّا، طبِّق التّابع ‎.blur()‎ بدون وسيط:

$( "#other" ).click(function() {
  $( "#target" ).blur();
});

بعد تنفيذ هذه الشيفرة سيُعطينا الضغط على عبارة "إطلاق مُعالِج الحدث" رسالة التنبيه.

لا ينتقل (bubble) الحدث blur في متصفح Internet Explorer، لهذا لن تعمل الشيفرات التي تعتمد على تفويض الأحداث (event delegation) مع الحدث blur بشكل ثابت عبر المتصفحات. بدءًا من إصدار 1.4.2 تعمل jQuery على الالتفاف حول هذا التقييد عن طريق إعادة توجيه الحدث blur إلى الحدث focusout عن طريق توابع تفويض الأحداث ‎.live()‎ و ‎.delegate()‎.

ملاحظات إضافيّة

  • لمّا كان التّابع ‎.blur()‎ مُجرَّد اختصار للتابع ‎.on( "blur", handler )‎، فمن الممكن إلغاء الحدث عبر استخدام ‎.off( "blur" )‎.

أمثلة

لإطلاق الحدث blur على جميع الفقرات <p>:

$( "p" ).blur();

مصادر