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

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

HTML:

اضغط

JavaScript:

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

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

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

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

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

HTML:

JavaScript:

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

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

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

HTML:

  
  إرسال

JavaScript:

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

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

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

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

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

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

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

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

أستخدم هذا الأسلوب كثيرًا في القوائم التي تتغيّر عناصرها باستمرار، لأنه يعمل حتى مع العناصر المُضافة لاحقًا. لا تقلق إن لم يتّضح تمامًا الآن — فقط احفظ الفكرة، وستقدّرها حين تبني واجهات أكبر. ذكرتها لأنها من أكثر ما يميّز كود المحترفين عن المبتدئين.