مفاهيم مثل event delegation

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

بخصوص 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() على العنصر نفسه الذي تريد حذفه.