مقارنة إطار عمل جافا سكريبت: التعامل مع الأحداث

يقوم كل إطار عمل JavaScript بتنفيذ معالجة الأحداث عبر المتصفحات، مما يشجعك على الابتعاد عن النمط القديم المضمن للأحداث واستخدام نهج خطي مبسط. ألقِ نظرة على مثال jQuery في القائمة 6 الذي يستخدم حدث التمرير لتمييز عنصر div.

القائمة 6: إرفاق حدث التحويم باستخدام jQuery

$('#the-box').hover(function() {
$(this).addClass('تسليط الضوء');
}، وظيفة() {
$(this).removeClass('تسليط الضوء');
});

يعد هذا حدثًا خاصًا لـ jQuery، وستجد أنه يوفر وظيفتين. يتم استدعاء الوظيفة الأولى عند تشغيل الحدث onMouseOver، ويتم استدعاء الوظيفة الثانية عند تشغيل الحدث onMouseOut. وذلك لأنه لا يوجد حدث DOM قياسي للتمرير. دعونا نلقي نظرة على حدث أكثر نموذجية مثل النقر (راجع القائمة 7):

القائمة 7: إرفاق أحداث النقر باستخدام jQuery

$('#الزر').انقر(وظيفة() {
تنبيه ("لقد ضغطت على الزر!")؛
});

كما ترون، هناك معلمة دالة واحدة فقط في المثيل. تتم معالجة معظم الأحداث في jQuery بنفس الطريقة، باستخدام معالجات الأحداث في jQuery، يشير السياق إلى الكائن الذي أطلق الحدث. بعض الأطر لا تعمل بهذه الطريقة. في حالة النموذج الأولي، يبدو الكود الموجود في القائمة 7 تمامًا مثل القائمة 8.

القائمة 8: إرفاق أحداث النقر باستخدام النموذج الأولي

$('الزر').ملاحظة('انقر', وظيفة(ه) {
تنبيه ("لقد ضغطت على الزر!")؛
});

أول شيء ستلاحظه هو عدم وجود وظيفة النقر، ولكن وظيفة المراقبة التي تقبل معلمة الحدث قبل الرجوع إلى نفسها. ستلاحظ أيضًا أن الدالة تقبل المعلمة e، حيث يشير السياق إلى العنصر الذي أدى إلى الحدث. لمعرفة كيفية عمله، دعونا نعيد كتابة الكود في القائمة 6 باستخدام النموذج الأولي (انظر القائمة 9).

القائمة 9: إرفاق أحداث التمرير باستخدام النموذج الأولي

$('the-box').observe('mouseover', function(e) {
var el = Event.element(e);
el.addClassName('تسليط الضوء');
});
$('the-box').observe('mouseout', function(e) {
var el = Event.element(e);
el.removeClassName('تسليط الضوء');
});

يختلف jQuery أيضًا، ما عليك سوى استخدام الدالة $ للحصول على متغيرات السياق، بينما تستخدم مكتبة النموذج الأولي الدالة Event.element(). بالإضافة إلى ذلك، لاحظت أنك تحتاج إلى فصل حدثي تمرير الماوس وخروج الماوس.

من خلال بعض البرامج التعليمية في هذه المقالة، يمكنك أن ترى أن الوظائف يتم إنشاؤها بشكل مضمّن وليست مسماة. هذا يعني أنه لا يمكن إعادة استخدامها، ويمنحنا مثال التمرير الخاص بالنموذج الأولي أيضًا فرصة لمعرفة كيفية استخدام الوظائف المسماة. توضح القائمة 10 هذه الطريقة.

القائمة 10: تحسين أحداث التمرير باستخدام النموذج الأولي

ستلاحظ أنه في هذه المرحلة ما عليك سوى تحديد دالة واحدة. يتم استدعاؤه بواسطة حدثي تمرير الماوس وإخراج الماوس. تحدد هذه الوظيفة ما إذا كان العنصر له اسم فئة "تمييز"، وتضيفه أو تزيله بناءً على النتيجة. ستلاحظ أيضًا أنه تم تمرير المعلمة e ضمنيًا. بمعنى آخر، قمت بتمرير وسيطة غامضة إلى وظيفة المراقبة.

عنوان إعادة الطباعة: http://www.denisdeng.com/?p=720

العنوان الأصلي: http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html

وظيفة تبديل الفئة (ه) {
var el = Event.element(e);
إذا (el.hasClassName('تسليط الضوء'))
Row.removeClassName('تسليط الضوء');
آخر
Row.addClassName('تسليط الضوء');
}

$('the-box').observe('mouseover', toggleClass);
$('the-box').observe('mouseout', toggleClass);