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

من موسوعة حسوب

‎.change( handler )‎

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

كائن jQuery.

الوصف

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

‎.change( handler )‎

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

handler

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

‎.change( [eventData ], handler )‎

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

eventData

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

handler

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

‎.change()‎

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

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

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

يُرسَل الحدث change إلى العنصر عندما تتغيّر قيمته، ويكون هذا الحدث محدودًا لعناصر ‎<input>‎، و ‎<textarea>‎، و ‎<select>‎. يُطلَق هذا الحدث مباشرةً بالنسبة لمربّعات الاختيار ومربّعات التأشير وأزرار الانتقاء (radio buttons) عندما يختار المستخدم عن طريق الفأرة، ولكن يُؤجَّل بالنسبة لأنواع العناصر الأخرى حتى يفقد العنصر التركيز عنه.

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

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">الخيار 1</option>
    <option value="option2">الخيار 2</option>
  </select>
</form>
<div id="other">
  إطلاق معالج الحدث
</div>

يُمكِن ربط مُعالِج الحدث إلى عنصر ‎<input>‎ ومربّع الاختيار:

$( ".target" ).change(function() {
  alert( "استًدعي معالج الأحداث للتابع .change()" );
});

عندما نختار الخيار الثاني الآن من القائمة المنسدلة، فستُعرَض رسالة التنبيه، وستُعرَض أيضًا إن غيّرنا النص في الحقل ثمّ ضغطنا بعيدًا عنه. إن فقد الحقل التركيز عنه بدون تغيير المحتوى فلن يُطلَق الحدث. لإطلاق الحدث يدويًّا استخدم التابع ‎.change()‎ بدون وسائط: