في هذا الدرس ستتعلم كيف تتفاعل JavaScript مع المستخدم عبر الأحداث (Events)

الأحداث (Events) هي ما يجعل الصفحة “حية”. عند ضغط زر، كتابة نص، إرسال نموذج، أو حتى تحريك الفأرة — كل ذلك أحداث يمكن لـ JavaScript الاستماع لها والتصرف بناءً عليها.

ما هو الحدث؟

الحدث هو شيء يحدث في الصفحة (click، input، submit…)، ونحن نربط له “مستمع” (Listener) لينفّذ كودًا عند وقوعه.

addEventListener (الطريقة الصحيحة)

HTML:

JavaScript:


let btn = document.getElementById("btn");

btn.addEventListener("click", function () {
  alert("تم الضغط!");
});

هذه الطريقة أفضل من onClick داخل HTML.

حدث click


let box = document.getElementById("box");

box.addEventListener("click", function () {
  box.classList.toggle("hidden");
});

عند كل ضغطة يتم إظهار/إخفاء العنصر.

حدث input (الكتابة داخل الحقول)

HTML:

JavaScript:


let input = document.getElementById("name");
let result = document.getElementById("result");

input.addEventListener("input", function () {
  result.textContent = "مرحبًا " + input.value;
});

يتحدّث النص مباشرة أثناء الكتابة.

حدث submit (النماذج)

HTML:

JavaScript:


let form = document.getElementById("myForm");

form.addEventListener("submit", function (event) {
  event.preventDefault(); // منع إعادة تحميل الصفحة
  alert("تم إرسال النموذج");
});

بدون preventDefault() ستُعاد تحميل الصفحة.

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


document.addEventListener("keydown", function (event) {
  console.log(event.key);
});

مفيد للاختصارات (مثل الألعاب أو البحث).

كائن الحدث (event)


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

event.target هو العنصر الذي حدث عليه الحدث.

أخطاء شائعة مع Events

استخدام onClick داخل HTML
نسيان preventDefault في submit
كتابة الكود قبل تحميل الصفحة
الخلط بين click و input

تمارين للتطبيق

زر يغيّر لون عنصر عند الضغط.
حقل نص يعرض عدد الأحرف أثناء الكتابة.
نموذج يمنع الإرسال إذا كان الحقل فارغًا.

ماذا بعد هذا الدرس؟

الدرس القادم: بناء مشروع صغير (To-Do List)

سنجمع DOM + Events + Arrays في تطبيق حقيقي.