الأحداث المخصصة
أنشئوا أحداثكم الخاصة وأطلقوها.
الأحداث المخصصة درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ما بعد الأحداث المضمّنة
يتيح لك DOM إنشاء أحداثك الخاصة وإطلاقها باستخدام CustomEvent. يفصل هذا أجزاء تطبيقك عن بعضها: يعلن أحد المكونات عن حدوث أمر ما، بينما تستمع المكونات الأخرى دون الحاجة إلى مرجع مباشر.
إنشاء CustomEvent
أنشئ واحدًا باستخدام new CustomEvent(name, options). ويمكن أن يكون الاسم أي سلسلة تختارها.
const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"إطلاق الحدث
أطلق الحدث على هدف باستخدام dispatchEvent. يعمل أي مستمع مسجل لهذا الاسم على الهدف (أو على أحد أسلافه إذا كان الحدث ينتشر صعودًا).
element.dispatchEvent(new CustomEvent("cart:add"));الاستماع إليه
استمع إليه تمامًا كما تستمع إلى حدث أصلي، باستخدام addEventListener مع اسمك المخصص.
element.addEventListener("cart:add", () => {
console.log("Something was added to the cart");
});تمرير البيانات باستخدام detail
أرفق حمولة بيانات عبر الخاصية detail. ويقرأ المستمعون هذه البيانات من event.detail.
const evt = new CustomEvent("cart:add", {
detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);قراءة الحمولة
تحتوي event.detail داخل المستمع على كل ما مررته. ويمكن أن تكون أي قيمة: كائنًا أو مصفوفة أو سلسلة أو رقمًا.
element.addEventListener("cart:add", (e) => {
console.log(e.detail.id, e.detail.qty); // 42 2
});جعل الحدث ينتشر صعودًا
لا تنتشر الأحداث المخصصة صعودًا افتراضيًا. عيّن bubbles: true حتى تتمكن العناصر السلف والمستمعات المفوَّضة من سماعها.
const evt = new CustomEvent("cart:add", {
bubbles: true,
detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listenالخيار cancelable
عيّن cancelable: true للسماح للمستمعات باستدعاء preventDefault(). ويتحقق مطلق الحدث من القيمة المعادة من dispatchEvent لمعرفة ما إذا كان قد أُلغي.
const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();نمط لفصل المكونات
تتيح الأحداث المخصصة للوحدات التواصل دون استيراد بعضها بعضًا. ويمكن لطبقة التسجيل أو التحليلات الاستماع إلى الأحداث العامة للتطبيق على document.
document.addEventListener("user:login", (e) => {
analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
new CustomEvent("user:login", { detail: { userId: 7 } })
);اصطلاحات التسمية
استخدم مساحة أسماء لأسماء الأحداث (مثل cart:add وuser:login) لتجنب التعارض مع الأحداث الأصلية، ولتجميع الأحداث المرتبطة بوضوح.
الصياغة القديمة مقابل الحديثة
قد ترى واجهة API القديمة document.createEvent في الشيفرات الأقدم. فضّل الباني الحديث new CustomEvent(...)؛ فهو أبسط، وهو الصيغة الوحيدة التي ينبغي أن تكتبها اليوم.
const evt = new CustomEvent("ready", { detail: 1 });تحقق سريع
اختبار معرفتك بالأحداث المخصصة.
مراجعة
استخدم new CustomEvent(name, { detail, bubbles, cancelable }) وdispatchEvent لإنشاء أحداثك الخاصة. اقرأ الحمولة عبر event.detail، وفعّل الانتشار صعودًا اختياريًا للتفويض، واستخدم cancelable للإجراءات القابلة للإلغاء. تفصل الأحداث المخصصة المكونات، وتحوّلها إلى نمط نظيف من النشر والاشتراك.
الأسئلة الشائعة
هل درس «الأحداث المخصصة» مجاني؟
نعم — نص درس «الأحداث المخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «الأحداث المخصصة»؟
أنشئوا أحداثكم الخاصة وأطلقوها. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الأحداث المخصصة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.