الأحداث وتفويض الأحداث (Event Delegation)

يستطيع Pocket أن يرسم قائمته. والآن يريد الناس أن يفعلوا بها أشياء: حذف مصروف، أو تعليم أحدها بأنه رُوجع، أو التصفية حسب الفئة. كل ذلك يبدأ بأن يفعل المستخدم شيئًا، كالنقر أو الكتابة، فيتفاعل كودك. والمتصفّح يُبلغ عن كل ما يفعله المستخدمون على شكل أحداث (events).

الاستماع إلى حدث

تطلب من عنصر أن يُعلمك بحدث ما باستخدام addEventListener:

const clearButton = document.querySelector("#clear");

clearButton.addEventListener("click", (event) => {
  console.log("Clear was clicked", event.type);
});

اقرأها هكذا: “حين تقع نقرة على هذا الزر، استدعِ هذه الدالة”. دالتك لا تُنفَّذ الآن. بل يخزّنها المتصفّح ويستدعيها لاحقًا، مرة لكل نقرة، ويمرّر إليها كائن حدث (event object) فيه تفاصيل ما جرى. هذه فكرة الـ callback من درس الدوال، والمتصفّح هنا هو الكود الذي يستدعيك راجعًا.

أنواع الأحداث التي ستستخدمها أكثر من غيرها: click، وinput (تغيّرت قيمة حقل نصي)، وchange (اعتُمدت قيمة، مثلًا في قائمة اختيار)، وsubmit (أُرسل نموذج)، وkeydown (ضُغط مفتاح؛ وevent.key تقول أيّ مفتاح، مثل "Enter" أو "Escape").

البيانات أولًا، ثم العرض

أهم عادة مع الأحداث: لا تعامل الصفحة على أنها المكان الذي تعيش فيه بياناتك. احتفظ بالبيانات في متغيّر، وغيّر المتغيّر في معالج الحدث، واستدعِ دالة العرض من الدرس السابق لتعيد الرسم:

let expenses = [
  { id: "exp-1", label: "Coffee", amount: 450 },
  { id: "exp-2", label: "Train", amount: 1220 },
];

clearButton.addEventListener("click", () => {
  expenses = [];
  renderExpenses(expenses);
});

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

الانتشار للأعلى: الأحداث تصعد في الشجرة

حين تنقر على زر داخل عنصر قائمة داخل قائمة، فأنت تنقر عليها كلها: الزر، و<li>، و<ul>، و<body>. ويمثّل المتصفّح ذلك بأن يسلّم الحدث أولًا إلى العنصر الذي نقرت عليه، وهو الهدف (target)، ثم إلى كل سلف بدوره، صعودًا حتى document. وهذا يُسمّى الانتشار للأعلى (bubbling).

داخل معالج الحدث، event.target هو العنصر الذي بدأ فيه الحدث، وevent.currentTarget هو العنصر الذي يعمل مستمعه الآن. ولذلك يسمع المستمع الموجود على <ul> النقرات على كل زر بداخلها، ويستطيع مع ذلك أن يعرف أيّ زر كان.

تفويض الأحداث: مستمع واحد للقائمة كلها

لنفترض أن لكل مصروف زر حذف. يمكنك أن تُلحق مستمعًا بكل زر، لكن دالة العرض ترمي هذه الأزرار وتصنع أزرارًا جديدة في كل مرة تتغيّر فيها القائمة، والأزرار الجديدة بلا مستمعين. بدلًا من ذلك، ألحِق مستمعًا واحدًا بالقائمة، وهي لا تُستبدل أبدًا، واستنتج ما الذي نُقر عليه:

const list = document.querySelector("#expense-list");

list.addEventListener("click", (event) => {
  const button = event.target.closest("button.delete");
  if (!button) {
    return; // the click was somewhere else in the list
  }
  const id = button.closest("li").dataset.id;
  expenses = expenses.filter((e) => e.id !== id);
  renderExpenses(expenses);
});

closest(selector) تبدأ من عنصر وتصعد عبر أسلافه حتى تجد واحدًا يطابق، أو تُرجع null. وهذا يغطّي النقرات على أيقونة داخل الزر، والحارس if (!button) يتجاهل النقرات على باقي العنصر. والمعرّف يأتي من data-id الذي ضبطته أثناء العرض، وتغيير البيانات يتم بـ filter، تمامًا كما في القسم 3.

يُسمّى هذا النمط تفويض الأحداث (event delegation). إنه يعني مستمعين أقل، ويظل يعمل مع العناصر المضافة بعد إعداد المستمع، لأن نقراتها تنتشر إلى القائمة نفسها.

لإيقاف انتشار النقرة إلى أعلى يمكنك استدعاء event.stopPropagation()، لكنك نادرًا ما ستحتاج إليها، واستخدامها كثيرًا يُعطّل التفويض في مكان آخر. أما event.preventDefault() فمختلفة وأكثر شيوعًا بكثير: إنها تلغي الفعل الافتراضي للمتصفّح، مثل اتباع رابط أو إرسال نموذج. وهذه الثانية هي نجمة الدرس التالي.