مفاهيم مثل event delegation

وعليكم السلام ورحمة الله وبركاته

إتقان الـ DOM هو فعلاً من الأشياء اللي تفرق بين مبرمج مبتدئ ومبرمج محترف في JavaScript.

وأولاً تحتاج ل أن تفهم كيف يعمل الـ DOM Tree. المتصفح يحول صفحة الـ HTML إلى شجرة من العقد (nodes)، وكل عنصر في صفحتك هو عقدة لها علاقات مع العناصر الأخرى مثل الأب (parent) والأبناء (children) والأشقاء (siblings) كما بالمقالة التالية

وبعدها تحتاج لإتقان طرق الوصول إلى العناصر مثل querySelector وquerySelectorAll،

وبعدها من المهم جداً أن تفهم كيف تنتشر الأحداث في DOM. عندما يحدث حدث ما (مثل نقرة)، فإنه يمر بثلاث مراحل: مرحلة الالتقاط (capturing phase) ، ثم مرحلة الهدف (target phase) ، ثم مرحلة الفقاعة (bubbling phase) حيث يصعد الحدث مرة أخرى إلى الأعلى.

وأيضاً من المواضيع المهمة والمتقدمة في ال DOM هو

• تحسين الأداء باستخدام Document Fragment
• Intersection Observer API
• Mutation Observer
• Reflow وRepaint

وبالنسبة للمصادر فلديك موسوعة حسوب وموقع MDN Web Docs وأيضاً الكتاب التالي ممتاز جداً

لم تذكر ما هو مستواك أو مدة تعلمك للغة جافاسكريبت وخبرتك بها؟ سأفترض أنك متوسط الخبرة.

بخصوص event delegation  عليك تعلم الفرق بين target و currentTarget فهو أهم مفهوم لاستيعاب الـ Event Delegation بشكل صحيح، أي عندما تضغط على زر داخل div، الحدث ينطلق.

و كيفية التعامل مع كائن الحدث والخواص بداخله مثل event.target والذي هو العنصر الذي ضغطت عليه بالفعل، و event.currentTarget العنصر الذي يحمل الـ Event Listener أي الزر نفسه أو الـ div الأب.

تحتاج لمعرفة أي ابن تم ضغطه والخلط بينهما يسبب مشاكل، مثلاً تضغط على الأيقونة فلا يعمل الزر لأن الكود يتوقع الزر.

ثم تعلم التنقل للأب عن طريق دالة closest() وهي مكملة للـ Event Delegation، فبدلاً من كتابة parentNode.parentNode وهو أسلوب سيء، تستخدم closest('.class-name').

بمعنى عندما تعين مستمع على قائمة، والمستخدم يضغط على أيقونة داخل زر داخل القائمة، فأنت تريد الوصول للزر وليس الأيقونة.

menu.addEventListener('click', (e) => {
  const button = e.target.closest('.btn');
  
  if (!button) return; 
  
  console.log("تم ضغط الزر!");
});

لكن قبل ذلك يجب تعلم المفاهيم التالية:

1. event.preventDefault()
2. localStorage
3. setInterval
4. setTimeout
5. clearInterval
6. أحداث تحميل الصفحة Life Cycle Events مثل DOMContentLoaded

ثم تعلم استخدام الـ dataset حيث يجب أن تتوقف عن الاعتماد على id أو محتوى النص innerText لتخزين البيانات، بل استخدم سمات data-* في الـ HTML، وتعامل معها بـ dataset في الـ JavaScript.

أي بدلاً من تخزين الـ ID في متغيرات، خزنه في الزر <button data-user-id="123" data-role="admin">حذف</button> ثم الوصول إلى تلك البيانات:

const userId = button.dataset.userId; 
const role = button.dataset.role;     

ثم تعلم كيفية  التحكم في الكلاسات عبر classList:

• classList.toggle('active') يضيف الكلاس إن لم يكن موجود ويزيله في حال موجود، وذلك مفيد للقوائم والأزرار.
• classList.contains('active') للتحقق من الحالة الحالية.

ثم كيفية  إنشاء العناصر بـ createElement و append، بدلاً من استخدام innerHTML += '<div> </div>' الذي يعيد رسم القائمة بالكامل ويبطئ الصفحة ويمسح الـ Event Listeners القديمة.

const newDiv = document.createElement('div');
newDiv.classList.add('item');
newDiv.textContent = 'عنصر جديد';
container.append(newDiv);

أيضًا إزالة العناصر بـ remove()، فقديمًا كنا نحتاج للوصول للأب لحذف الابن parent.removeChild(child)،والآن ببساطة استدعي element.remove() على العنصر نفسه الذي تريد حذفه.