الأحداث المخصصة في جافاسكريبت

مفهوم CustomEvent في جافاسكربت

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

يمكنك وضع الأكواد التي تريدها أن تتنفذ عند حدوث أمر معين بشكل مباشر في المكان المطلوب و لكن في بعض الحالات يصبح الأمر معقداً و الطرق التقليدية لا تصلح لذلك. هنا تأتي أهمية الأحداث المخصصة ( Custom Events ) حيث يمكنك إنشاء حدث مخصص لحالة خاصة و إطلاق هذا الحدث عند نقطة معينة أثناء تنفيذ البرنامج.

في هذا المقال ستفهم ما هي فائدة استخدام الأحداث المخصصة عملياً، متى يكون استخدامها أمر ضروري و ستعرف كيف تتعامل معها.

مشكلة عدم اشتغال الكود بالترتيب الصحيح في جافاسكربت

الهدف من المثال التالي أن يتم إضافة 5 قيم في المصفوفة numbers بعد ثانية واحدة من تشغيل البرنامج و في النهاية يفترض أن يتم عرض عدد القيم التي تم إضافتها فيها.

لاحظ أن الكود مكتوب بشكل بسيط و قد يبدو لك أنه يعمل بشكل جيد، و لكنه حقيقةً لن يعمل بالشكل المتوقع حيث أنه سيتم عرض قيم المصفوفة قبل أن يتم إضافة القيم فيها و بالتالي ستظهر كأنها فارغة!

var numbers = [];
var i = 0;

setTimeout(() => {
    for (let i=0; i<5; i++) {
        numbers.push(i);
        i++;
    }
}, 1000);
        
var element = document.getElementById('demo');
demo.innerHTML = numbers.length + ' elements';

5 elements

0 elements

طريقة إنشاء CustomEvent في جافاسكربت

لتعريف حدث مخصص بشكل صحيح، يجب اتباع الخطوات التالية:

1. إنشاء الحدث.
2. تعريف دالة تطلق الحدث عندما يتم استدعاءها.
3. الإستماع إلى الحدث، أي ربطه بكائن ما ليقوم بتنفيذ أوامر معينة عندما يجد أن الحدث قد تم إطلاقه.
4. إطلاق الحدث حتى يتنفذ.

1- إنشاء الحدث

سنقوم في البداية بتعريف متغير إسمه loopFinishedEvent يمثل حدث إسمه "loopFinished" و بالطبع يمكنك استبدال الإسم بأي إسم تريده.

const loopFinishedEvent = new CustomEvent("loopFinished");

2- تعريف دالة تطلق الحدث

الآن سنقوم بانشاء دالة إسمها triggerLoopFinishedEvent مهمتها إطلاق هذا الحدث عند استدعائها.
الدالة dispatchEvent نمرر لها المتغير الذي يمثل الحدث حتى تقوم بإطلاقه.

const triggerLoopFinishedEvent = () => {
  window.dispatchEvent(loopFinishedEvent);
};

3- الإستماع إلى الحدث

الآن سنقوم بجعل الكائن window يترقب حصول الحدث من خلال استدعاء الدالة addEventListener منه و تمرير إسم الحدث لها.
عند إطلاق الحدث سنقوم بطباعة عبارة "Our loop is finished".

window.addEventListener("loopFinished", () => {
    console.log("Our loop is finished");
});

4- إطلاق الحدث

الآن لإطلاق الحدث (أي ليتنفذ) فإنه يجب فقط استدعاء الدالة triggerLoopFinishedEvent المعرف بها كما يلي.

triggerLoopFinishedEvent();

تشغيل الكود بالترتيب الصحيح في جافاسكربت

يمكننا الآن حل المشكلة التي واجهتنا في البداية من خلال وضع شرط في حلقة التكرار الخاصة بنا و جعله يقوم بإطلاق الحدث "loopFinished" عندما يكون المتغير i وصل لآخر قيمة ممكنة له، ليصبح الكود النهائي كما يلي.

const numbers = [];

const loopFinishedEvent = new CustomEvent("loopFinished");

const triggerLoopFinishedEvent = () => {
  window.dispatchEvent(loopFinishedEvent);
};

window.addEventListener("loopFinished", () => {
  console.log("Our loop is finished");
  console.log(numbers);
});

for (let i = 0; i < 10; i++) {
  setTimeout(() => {
    numbers.push(i);
    if (i === 9) {
      triggerLoopFinishedEvent();
    }
  }, 1000);
}

Our loop is finished
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]