يستطيع Pocket أن يرسم قائمته. والآن يريد الناس أن يفعلوا بها أشياء: حذف مصروف، أو تعليم أحدها بأنه رُوجع، أو التصفية حسب الفئة. كل ذلك يبدأ بأن يفعل المستخدم شيئًا، كالنقر أو الكتابة، فيتفاعل كودك. والمتصفّح يُبلغ عن كل ما يفعله المستخدمون على شكل أحداث (events).
\nتطلب من عنصر أن يُعلمك بحدث ما باستخدام addEventListener:
const clearButton = document.querySelector(\"#clear\");\n\nclearButton.addEventListener(\"click\", (event) => {\n console.log(\"Clear was clicked\", event.type);\n});اقرأها هكذا: “حين تقع نقرة على هذا الزر، استدعِ هذه الدالة”. دالتك لا تُنفَّذ الآن. بل يخزّنها المتصفّح ويستدعيها لاحقًا، مرة لكل نقرة، ويمرّر إليها كائن حدث (event object) فيه تفاصيل ما جرى. هذه فكرة الـ callback من درس الدوال، والمتصفّح هنا هو الكود الذي يستدعيك راجعًا.
\nأنواع الأحداث التي ستستخدمها أكثر من غيرها: click، وinput (تغيّرت قيمة حقل نصي)، وchange (اعتُمدت قيمة، مثلًا في قائمة اختيار)، وsubmit (أُرسل نموذج)، وkeydown (ضُغط مفتاح؛ وevent.key تقول أيّ مفتاح، مثل "Enter" أو "Escape").
أهم عادة مع الأحداث: لا تعامل الصفحة على أنها المكان الذي تعيش فيه بياناتك. احتفظ بالبيانات في متغيّر، وغيّر المتغيّر في معالج الحدث، واستدعِ دالة العرض من الدرس السابق لتعيد الرسم:
\nlet expenses = [\n { id: \"exp-1\", label: \"Coffee\", amount: 450 },\n { id: \"exp-2\", label: \"Train\", amount: 1220 },\n];\n\nclearButton.addEventListener(\"click\", () => {\n expenses = [];\n renderExpenses(expenses);\n});معالج الحدث لا يمسّ عناصر <li> مباشرة أبدًا. إنه يغيّر البيانات، ودالة العرض تجعل الصفحة مطابقة لها. ومهما أضفت من أزرار، يبقى هناك مكان واحد يرسم القائمة، فلا يمكن أن يختلف المجموع والقائمة أبدًا.
حين تنقر على زر داخل عنصر قائمة داخل قائمة، فأنت تنقر عليها كلها: الزر، و<li>، و<ul>، و<body>. ويمثّل المتصفّح ذلك بأن يسلّم الحدث أولًا إلى العنصر الذي نقرت عليه، وهو الهدف (target)، ثم إلى كل سلف بدوره، صعودًا حتى document. وهذا يُسمّى الانتشار للأعلى (bubbling).
داخل معالج الحدث، event.target هو العنصر الذي بدأ فيه الحدث، وevent.currentTarget هو العنصر الذي يعمل مستمعه الآن. ولذلك يسمع المستمع الموجود على <ul> النقرات على كل زر بداخلها، ويستطيع مع ذلك أن يعرف أيّ زر كان.
لنفترض أن لكل مصروف زر حذف. يمكنك أن تُلحق مستمعًا بكل زر، لكن دالة العرض ترمي هذه الأزرار وتصنع أزرارًا جديدة في كل مرة تتغيّر فيها القائمة، والأزرار الجديدة بلا مستمعين. بدلًا من ذلك، ألحِق مستمعًا واحدًا بالقائمة، وهي لا تُستبدل أبدًا، واستنتج ما الذي نُقر عليه:
\nconst list = document.querySelector(\"#expense-list\");\n\nlist.addEventListener(\"click\", (event) => {\n const button = event.target.closest(\"button.delete\");\n if (!button) {\n return; // the click was somewhere else in the list\n }\n const id = button.closest(\"li\").dataset.id;\n expenses = expenses.filter((e) => e.id !== id);\n renderExpenses(expenses);\n});closest(selector) تبدأ من عنصر وتصعد عبر أسلافه حتى تجد واحدًا يطابق، أو تُرجع null. وهذا يغطّي النقرات على أيقونة داخل الزر، والحارس if (!button) يتجاهل النقرات على باقي العنصر. والمعرّف يأتي من data-id الذي ضبطته أثناء العرض، وتغيير البيانات يتم بـ filter، تمامًا كما في القسم 3.
يُسمّى هذا النمط تفويض الأحداث (event delegation). إنه يعني مستمعين أقل، ويظل يعمل مع العناصر المضافة بعد إعداد المستمع، لأن نقراتها تنتشر إلى القائمة نفسها.
\n\nلإيقاف انتشار النقرة إلى أعلى يمكنك استدعاء event.stopPropagation()، لكنك نادرًا ما ستحتاج إليها، واستخدامها كثيرًا يُعطّل التفويض في مكان آخر. أما event.preventDefault() فمختلفة وأكثر شيوعًا بكثير: إنها تلغي الفعل الافتراضي للمتصفّح، مثل اتباع رابط أو إرسال نموذج. وهذه الثانية هي نجمة الدرس التالي.
addEventListener(type, handler) تسجّل دالة يستدعيها المتصفّح لاحقًا، مع كائن حدث يصف ما جرى.","مرّر معالج الحدث (handler) نفسه، دون أقواس؛ فكتابة handler() تستدعيه فورًا وتسجّل القيمة التي أرجعها بدلًا منه.","تنتشر الأحداث للأعلى من العنصر الذي نُقر عليه عبر أسلافه، لذلك يسمع المستمع الموجود على عنصر أب النقرات على أبنائه.","مع تفويض الأحداث، يستخدم مستمع واحد على الحاوية event.target.closest(...) ليعرف أيّ عنصر نُقر عليه، بما في ذلك العناصر المضافة لاحقًا.","احتفظ بالبيانات في متغيّرات، وغيّر البيانات داخل معالجات الأحداث، ثم استدعِ دالة العرض؛ ولا تعامل الصفحة أبدًا على أنها مصدر الحقيقة."],"further":[{"title":"Introduction to events (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Events"},{"title":"EventTarget.addEventListener() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener"},{"title":"Event bubbling (MDN)","url":"https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling"}],"quiz":[{"q":"ما الخطأ في button.addEventListener("click", deleteExpense());؟
deleteExpense مرة واحدة فورًا، وتُسجَّل القيمة التي أرجعتها (undefined على الأرجح) بدلًا من الدالة.","why":"صحيح. مرّر الدالة نفسها، deleteExpense، أو غلّفها، () => deleteExpense(id)، كي يستدعيها المتصفّح مع كل نقرة."},{"text":"لا يمكن أن يكون للأزرار مستمعو نقرات؛ هذا للروابط فقط.","why":"يمكن لأي عنصر أن يكون له مستمع نقرات، والأزرار هي العنصر الصحيح للأفعال."}],"answer":1},{"q":"عنصر قائمة يحتوي على <span>Coffee</span> <button class="delete">×</button>. والمستمع موجود على <ul>. ينقر المستخدم على الزر. ما قيمتا event.target وevent.currentTarget؟
<ul>.","why":"currentTarget هي <ul>، لكن target هي العنصر الذي نُقر عليه فعلًا."},{"text":"target هي <ul> وcurrentTarget هي الزر.","why":"العكس هو الصحيح. target حيث بدأ الحدث؛ وcurrentTarget حيث يوجد المستمع."},{"text":"target هي الزر وcurrentTarget هي <ul>.","why":"صحيح. بدأت النقرة على الزر وانتشرت للأعلى حتى <ul>، التي يعمل مستمعها الآن."}],"answer":2},{"q":"لماذا يظل المستمع المفوَّض يعمل مع المصاريف المضافة بعد تحميل الصفحة؟
","options":[{"text":"ينسخ المتصفّح المستمعين تلقائيًا إلى كل ابن جديد.","why":"المستمعون لا يُنسخون أبدًا. كل واحد يبقى بالضبط حيث ألحقته."},{"text":"المستمع على الحاوية، وهي لا تتغيّر أبدًا، والنقرات على أي ابن تنتشر للأعلى حتى تصل إليها.","why":"صحيح. العناصر الجديدة داخل الحاوية نفسها، لذلك تصل نقراتها إلى المستمع نفسه."},{"text":"المستمعون المفوَّضون يُنفَّذون مجددًا كلما تغيّر الـ DOM.","why":"المستمعون لا يُنفَّذون إلا حين يقع حدثهم. ولا شيء يُعاد تنفيذه عند تغيّر الـ DOM."}],"answer":1},{"q":"داخل معالج نقرات مفوَّض، لماذا نستخدم event.target.closest(".delete") بدلًا من فحص event.target.classList.contains("delete")؟
closest أسرع من classList.","why":"السرعة ليست المشكلة؛ فكلتاهما فورية. المشكلة في العنصر الذي تقع عليه النقرة."},{"text":"classList لا تعمل مع العناصر الموجودة داخل قائمة.","why":"classList تعمل مع كل عنصر. المشكلة أن الهدف قد يكون ابنًا للزر."},{"text":"قد تقع النقرة على عنصر داخل الزر، مثل أيقونة، وclosest تصعد لتجد الزر رغم ذلك.","why":"صحيح. closest تفحص العنصر نفسه ثم كل سلف له، وتُرجع أول تطابق أو null."}],"answer":2}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"لكل مصروف زر حذف (Delete). يُلحق كود البداية مستمعًا بكل زر، لكن renderExpenses تستبدل الأزرار بعد أول حذف، فلا يفعل الحذف الثاني شيئًا، ولا يمكن أبدًا حذف المصاريف الجديدة.
استبدل الحلقة في الأسفل بمستمع نقرات واحد على #expense-list. حين تقع نقرة على زر .delete (أو داخله)، أزِل ذلك المصروف من expenses مستخدمًا data-id الخاص بالعنصر، ثم استدعِ renderExpenses(). ويجب ألّا تفعل النقرات في أي مكان آخر من القائمة شيئًا.
list.addEventListener("click", (event) => { … });.","event.target.closest(".delete") تعطيك الزر، أو null إن لم تكن النقرة على زر. اخرج مبكرًا حين تكون null.","المعرّف موجود على <li>: button.closest("li").dataset.id. ثم expenses = expenses.filter((e) => e.id !== id); وrenderExpenses();."],"explanation":"عنصر القائمة يُنشئه HTML مرة واحدة ولا يُستبدل أبدًا، لذلك ينجو المستمع الموجود عليه من كل عملية عرض. والنقرات على أي زر حذف تنتشر إليه للأعلى، بما في ذلك أزرار المصاريف التي لم تكن موجودة حين أُضيف المستمع. وتجد closest(".delete") الزر حتى لو وقعت النقرة على شيء بداخله، وتُرجع null للنقرات على التسمية، فيتجاهلها الـ return المبكر. ومعالج الحدث لا يغيّر إلا البيانات ثم يعيد العرض، فتبقى القائمة والمجموع متّفقين دائمًا مع expenses.