الأحداث في JavaScript: click و input و submit و keydown باستخدام addEventListener

الصفحة تصبح "حية" عندما تتفاعل مع أفعال المستخدم: نقرة، كتابة، تمرير، أو إرسال نموذج. هذا بالضبط دور DOM Events في JavaScript.

إذا كنت تتساءل: كيف أنفذ كود عندما يضغط المستخدم زر؟ أو كيف ألتقط كتابة المستخدم لحظياً؟، فهذا الدرس يعطيك الأساس الصحيح.

ما هو الحدث (Event)؟

الحدث هو إشارة من المتصفح تقول: "شيء ما حدث". JavaScript تستمع لهذه الإشارة وتنفذ دالة (Callback) كرد فعل.

1) الأساس: addEventListener()

const btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  console.log("Button clicked");
});

ماذا يفعل هذا الكود؟ يربط حدث click بزر محدد ويشغل دالة عند النقر.

النتيجة المتوقعة: كل نقرة تطبع رسالة في Console.

خطأ شائع: تنفيذ الكود قبل تحميل العنصر، فيكون btn بقيمة null.

2) استخدام كائن event لفهم ما حدث

btn.addEventListener("click", function (event) {
  console.log(event.type);      // click
  console.log(event.target.id); // myBtn
});

ماذا يفعل هذا الكود؟ يقرأ تفاصيل الحدث والعنصر الذي سببه.

النتيجة المتوقعة: معلومات أدق تساعد في بناء سلوك ذكي.

خطأ شائع: تسمية المتغير بأي اسم ثم نسيان استخدامه داخل الدالة.

3) حدث input للتفاعل أثناء الكتابة

const nameInput = document.querySelector("#name");
const preview = document.querySelector("#preview");

nameInput.addEventListener("input", function () {
  preview.textContent = nameInput.value;
});

ماذا يفعل هذا الكود؟ يعرض النص الذي يكتبه المستخدم مباشرة على الشاشة.

النتيجة المتوقعة: تحديث فوري بدون ضغط زر.

خطأ شائع: استخدام حدث change مع توقع تحديث لحظي حرفاً بحرف.

4) حدث submit مع preventDefault()

const form = document.querySelector("#signupForm");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  console.log("Form submitted safely");
});

ماذا يفعل هذا الكود؟ يمنع إعادة تحميل الصفحة عند إرسال النموذج.

النتيجة المتوقعة: تستطيع التحقق من المدخلات قبل إرسالها فعلياً.

خطأ شائع: نسيان preventDefault ثم اختفاء الرسائل بسبب reload فوري.

5) حدث keydown للوحة المفاتيح

document.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    console.log("You pressed Enter");
  }
});

ماذا يفعل هذا الكود؟ يلتقط ضغط Enter من لوحة المفاتيح.

النتيجة المتوقعة: تنفيذ اختصارات أو أوامر سريعة.

خطأ شائع: الخلط بين key وcode دون فهم الفرق.

Story قصيرة: زر لا يعمل

متعلم كتب Listener على عنصر غير موجود لحظة التنفيذ. النتيجة: لا شيء يحدث عند النقر. بعد نقل السكربت لأسفل الصفحة (أو استخدام defer) وُجد العنصر واشتغل الحدث فوراً.

أشهر الأحداث التي تبدأ بها

Checklist سريعة

• أستطيع ربط حدث بعنصر عبر addEventListener.
• أعرف متى أستخدم click وinput وsubmit.
• أفهم متى أحتاج preventDefault.
• أقرأ معلومات الحدث من الكائن event.

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

ما هو event في JavaScript؟

هو إجراء يحدث في الصفحة (مثل نقر أو كتابة) ويمكنك تنفيذ كود عند وقوعه.

لماذا نستخدم addEventListener بدل onclick؟

لأنه أكثر تنظيماً ومرونة ويسمح بإضافة عدة مستمعين بسهولة.

ما فائدة preventDefault في submit؟

تمنع الإرسال الفوري للنموذج، لتتحكم أنت في التحقق والمعالجة أولاً.

للمراجعة: DOM Content. للمتابعة: User Interaction.