مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class

في الكاتب: و مدرجة تحت التنصيف تلميحات سريعة, دروس.

بسم الله والحمدلله والصلاة والسلام على رسول الله – صلى الله عليه وسلم – .

أثناء العمل على صفحة ويب احتجت أن أضيف بعض التفاعلية مع المستخدم ، مثل الاستجابة لضغطة الماوس (mouse click event) على عنصر معين ، ولكن واجهتني مشكلة عند استخدامي لـ Vanilla.js (فانلا هي اسم رمزي للجافاسريبت كما هي plain !) لإنشاء Event Listener لعدة عناصر من نفس التصنيف لهذا الحدث وإليكم السيناريو:

  • لدي عدة عناصر من نفس التصنيف Class وأريد أن أنفذ دالة معينة عند مرور مؤشر الماوس فوق أي من تلك العناصر.
  • مثلا ظهور صندوق Alert() فيه محتويات العنصر
  • توفر الجافاسكربت إمكانية عمل listener ولكن فقط باستخدام ID الخاص بالعناصر ولا يمكن استخدام Class ..
  • Vanilla.js تمكنك من إضافة Listener ولكن باستخدام الـ ID ولا يمكن ذلك باستخدام الـ Class  كالآتي :

    singleItem=document.getElementById('onlyOne');
    singleItem.addEventListener('mouseover',doTheAction);
    
    

    نلاحظ أن الحدث Event هو مرور مؤشر الماوس والنتيجة هي تنفيذ الدالة doTheAction.
  • ولكن كما ذكرنا سابقا ينطبق ذلك فقط على ID وليس مع الClass

الاستماع للجميع

الاستماع للجميع.. هذا هو العدل.. ولكن لكي يكون صوتك مسموعاً يجب أن يكون لديك هوية..

الحل هو إضافة ID للعناصر ثم إضافة مستمع Listener لكل عنصر على حدة :

نفترض أن هذه هي العناصر

<div class="colors">Green</div>
<div class="colors">Yellow</div>
<div class="colors">Blue</div>

بداية يجب أن نتحصل علها

all_elements=document.getElementsByClassName('colors');

ثم سنقوم بالمرور على مجوعة العناصر باستخدام حلقة التكرار for loop ثم نضيف ID لكل عنصر وبذلك يكون جاهزاً ليتم ربطه مع مستمع Event Listener

for (var i =0;  i <= all_elemnts.length - 1; i++) {

// هنا يحصل العنصر على رقم هوية جديد 
// ID
all_elemnts[i].id="el"+i;

//نضعه في متغير
el=document.getElementById('el'+i);

//الآن أصبح للعنصر  
// ID
// ويمكننا ربطه
el.addEventListener('mouseover',doTheAction);
}//endForLoop

//والدالة :
function doTheAction(){
// ستعرض محتوى العنصر
alert(this.innerHTML);
}

بالإمكان استخدام مكتبة جيكويري jQuery لهذه المهمة ولكن الموضوع أبسط من تضمين المكتبة بكاملها (91Kb) لصفحة صغيرة!
سنعرض الآن الحل الذي تجنبنا استخدامه بالجيكويري jQuery :
وهو عبارة عن سطر واحد فقط!!

$('.colors').on('mouseover',doTheAction);

الحل بسيط كما ذكرنا مسبقاً ولكنه مكلف من ناحية سرعة تحميل الصفحة.

ملحوظة

Vanilla.js ليست مكتبة، ليست إطار عمل، إنه مصطلح أُطلق على الجافاسكربت كما هي بدون تعديلات Plain .. وتم إطلاق هذا الاسم لجذب الاهتمام.. حيث أصبح المطورين يبحثون عن مكتبات الجافاسكربت وربما لا يعرف أحدهم شيئا عن صيغة Syntax الجافاسكريبت وماهيتها.. هم فقط يعرفون صيغة المكتبات مثل الجيكويري وغيرها.. للتوضيح الجافاسكريبت للجيكويري مثل البي اتش بي للكودإجنايتر… مافي أبسط من كده!

احصل على المثال

روابط مفيدة لتعلم الجافاسريت :

ختاما نتمنى لكم أوقاتا ممتعة مع الجافاسكربت.
#

وصلى الله وسلم وبارك على سيدنا محمد صلى الله عليه وسلم والحمدلله رب العالمين

wdalhaj

مصمم و مطور ويب حر..يعشق شرب القهوة السوداء.. يمكنكم متابعته على التويتر [email protected]

More Posts

2 Responses to “مشكلة Vanilla.js مع إضافة Event Listener للعناصر ذات Class”

  1. Mustafa ismail

    انا افضل استخدام الجيكويري
    ( 91Kb لا تشكل فرق)

    • wdalhaj

      وانا أيضا أفضّل استخدامها ولكن ليس دائماً!

أضف تعليقاً

  • (لن يتم نشره)