شرح صفوف ومحتوى الفقرة
اعتمدت الشيفرات القديمة سابقاً على الدالة المطولة المهملة document.createEvent("CustomEvent") متبوعةً بـ initCustomEvent(). أما المعيار الحديث النظيف فهو الباني المباشر new CustomEvent(type, options).
مرّر البيانات المرافقة للحدث داخل الخاصية detail، واضبط الخيار bubbles: true إذا أردت صعود الحدث للأب الأعلى، ثم أطلقه فورياً عبر target.dispatchEvent(event).
const box = document.getElementById('out');
document.addEventListener('cart:add', (e) => {
box.textContent = e.detail.sku + ' x' + e.detail.qty;
});
const ev = new CustomEvent('cart:add', {
detail: { sku: 'JS-148', qty: 2 },
bubbles: true,
});
box.dispatchEvent(ev);ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس دوال الإنشاء في كائن المستند: تجميع القوائم عبر createDocumentFragment()، وبناء العناصر والنصوص الآمنة، وفهم createComment() وcreateAttribute()، وإطلاق الأحداث المخصصة عبر new CustomEvent(). الخطوة التالية: انتقل إلى درس تحريك عناصر الواجهة في DOM لبناء حركة بصرية سلسة متزامنة مع معدل تحديث الشاشة.