الأحداث في JavaScript ومشروع قائمة مهام كاملة

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

الاستماع لضغطة

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

أحداث شائعة

الحدث	متى يقع
`click`	ضغطة
`input`	كل تغيير في حقل أثناء الكتابة
`change`	بعد تغيير قيمة حقل واختيار
`submit`	إرسال نموذج
`keydown`	ضغط مفتاح
`mouseenter`	دخول الفأرة فوق عنصر
`scroll`	تمرير الصفحة

الكتابة لحظة بلحظة

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

النماذج ومنع إعادة التحميل

افتراضيًا، إرسال النموذج يعيد تحميل الصفحة. preventDefault() يمنع ذلك لنعالج البيانات بأنفسنا:

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

المشروع: قائمة مهام

تطبيق كامل: إضافة، وإنهاء، وحذف، وحفظ في المتصفح عبر localStorage لتبقى المهام بعد إعادة التحميل:

جرّب بنفسكعدّل الكود ثم اضغط تشغيل

function save() { try { localStorage.setItem("tasks", JSON.stringify(tasks)); } catch (e) {} }

document.querySelector("#add").addEventListener("submit", (e) => {
    e.preventDefault();
    const input = document.querySelector("#task");
    tasks.push({ text: input.value.trim(), done: false });
    input.value = "";
    save(); render();
  });

if (!tasks.length) tasks = [{ text: "أكمل دورة JavaScript", done: false }, { text: "ابنِ مشروعي الأول", done: false }];
  render();
</script>

أفكار لتطوير المشروع

عدّاد للمهام المنتهية، وزر «احذف المنتهية».
تعديل المهمة بالنقر المزدوج.
فرز حسب الأولوية مع قائمة منسدلة.

إلى أين بعد ذلك؟

Fetch لجلب بيانات من واجهات برمجية API.
Git وGitHub لحفظ مشاريعك ونشرها.
إطار مثل React أو Vue بعد إتقان الأساسيات.
عُد إلى صفحة الدورة وأجب عن الاختبار لتحصل على الشارة.

الخلاصة

addEventListener يربط حدثًا بدالة.
input للكتابة لحظيًا، وsubmit مع preventDefault للنماذج.
localStorage يحفظ البيانات في المتصفح، وبنيت تطبيقًا كاملًا.

المقالات

تعلّم

الأدوات

حل المشاكل

الأحداث في JavaScript ومشروع قائمة مهام كاملة

الاستماع لضغطة

أحداث شائعة

الكتابة لحظة بلحظة

النماذج ومنع إعادة التحميل

المشروع: قائمة مهام

أفكار لتطوير المشروع

إلى أين بعد ذلك؟

الخلاصة