JavaScript Academy · درس

القوائم الديناميكية مع التفويض

أديروا أحداث العناصر المضافة أثناء التشغيل.

القوائم الديناميكية مع التفويض درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

مشكلة العناصر الديناميكية

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

تعطل المستمعات المباشرة

يُضاف هنا مستمع إلى العناصر الموجودة. أما العنصر المضاف حديثًا فلا يحصل على أي شيء، ويظل غير تفاعلي.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

يعمل التفويض تلقائيًا

عند وجود مستمع مفوَّض على العنصر الأب، تتم معالجة العنصر الجديد تلقائيًا. ولا حاجة إلى إعادة ربط المستمع بعد كل عملية إدراج.

list.addEventListener("click", (e) => {
  const item = e.target.closest(".item");
  if (item) console.log("Clicked", item.dataset.id);
});
list.appendChild(newItem); // works immediately

إضافة العناصر

أنشئ العناصر الجديدة وألحقها. وبما أن العنصر الأب يستخدم التفويض مسبقًا، تصبح هذه العناصر تفاعلية بمجرد ظهورها.

function addItem(text) {
  const li = document.createElement("li");
  li.className = "item";
  li.textContent = text;
  list.appendChild(li);
}

إزالة العناصر

تتم الإزالة أيضًا بسهولة. يستطيع المعالج المفوَّض اكتشاف زر الحذف داخل الصف وإزالة الصف.

list.addEventListener("click", (e) => {
  if (e.target.matches(".delete-btn")) {
    e.target.closest(".item").remove();
  }
});

التمييز بين الإجراءات الفرعية

قد يحتوي الصف على عدة أجزاء تفاعلية. استخدم matches() أو closest() لمعرفة الجزء الذي نُقر عليه، ثم نفّذ الفرع المناسب.

list.addEventListener("click", (e) => {
  if (e.target.matches(".edit-btn")) edit(e);
  else if (e.target.matches(".delete-btn")) del(e);
});

التصيير من البيانات

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

function render(items) {
  list.innerHTML = items
    .map((i) => "<li class=\"item\" data-id=\"" + i.id + "\">" + i.name + "</li>")
    .join("");
}

لا متاعب في التنظيف

عند استخدام مستمعات لكل عنصر، يجب أن تتذكر استدعاء removeEventListener قبل حذف العقد لتجنب التسربات. أما التفويض فيزيل هذا العبء: حذف عنصر ابن لا يترك أي مستمع معزول.

تبديل الأصناف

يتكامل التفويض جيدًا مع تبديل الأصناف لحالات التحديد. يعثر المعالج على الصف ويبدّل صنفًا.

list.addEventListener("click", (e) => {
  const row = e.target.closest(".item");
  if (row) row.classList.toggle("selected");
});

قراءة المعرّف الثابت

بما أن عقد DOM تُستبدل عند إعادة التصيير، لا تخزن مراجع إليها أبدًا. خزّن معرّفًا ثابتًا في data-id، وابحث عن بياناتك في نموذج البيانات باستخدام ذلك المعرّف داخل المعالج.

const id = e.target.closest(".item").dataset.id;
const record = state.find((r) => r.id === id);

أحداث الإدخال أيضًا

لا يقتصر التفويض على النقرات. يمكنك تفويض أحداث input أو change لحقول النماذج المضافة ديناميكيًا بالطريقة نفسها.

form.addEventListener("input", (e) => {
  if (e.target.matches(".qty")) recalc(e.target);
});

تحقق سريع

القوائم الديناميكية وتفويض الأحداث.

مراجعة

يتألق التفويض مع القوائم الديناميكية: إذ يتولى مستمع واحد للعنصر الأب معالجة العناصر الابنة الحالية والمستقبلية، ويستمر بعد إعادة التصيير، ولا يحتاج إلى تنظيف لكل عقدة. استخدم matches() وclosest() للتفرع حسب الإجراءات الفرعية، وخزّن المعرّفات الثابتة في data-* حتى تتمكن المعالجات من العثور على نموذج البيانات.

الأسئلة الشائعة

هل درس «القوائم الديناميكية مع التفويض» مجاني؟

نعم — نص درس «القوائم الديناميكية مع التفويض» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.

ماذا ستتعلم في «القوائم الديناميكية مع التفويض»؟

أديروا أحداث العناصر المضافة أثناء التشغيل. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟

لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «القوائم الديناميكية مع التفويض»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟

نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى JavaScript Academy