مقدمة عن الاحداث (Events) في جافاسكربت

عندما نتحدث عن JavaScript فإن أهم ما يميزها هو قدرتها على جعل صفحات الويب تفاعلية وحية. تخيل لو أن صفحة الويب مجرد نصوص ثابتة وصور فقط بدون أي حركة أو استجابة! 🤔
هنا يأتي دور الأحداث (Events).

الأحداث هي ببساطة الأشياء التي تحدث على الصفحة:

  • ضغط المستخدم على زر.
  • تحريك الماوس فوق صورة.
  • كتابة نص في مربع إدخال.
  • تحميل الصفحة بالكامل.

كل هذه تسمى "أحداث"، وجافاسكربت تتيح لنا الاستماع لهذه الأحداث ثم تنفيذ أكواد معينة كرد فعل.

لماذا الأحداث مهمة؟

الأحداث تجعل مواقع الويب ديناميكية وتفاعلية. على سبيل المثال:

  • عند الضغط على زر "إرسال"، يتم التحقق من صحة البيانات قبل إرسالها.
  • عند تمرير الماوس على صورة، يمكن تكبيرها أو إضافة تأثير بصري.
  • عند الكتابة في خانة بحث، يتم إظهار اقتراحات مباشرة.

ببساطة، الأحداث هي الوسيلة التي يتفاعل بها المستخدم مع الموقع.

أنواع الأحداث الشائعة في JavaScript

هناك مئات الأحداث، لكن أكثرها شيوعًا:

1. أحداث الفأرة (Mouse Events)

  • click (عند النقر بالماوس)
  • dblclick (نقرة مزدوجة)
  • mouseover (عند المرور فوق عنصر)
  • mouseout (عند الخروج من العنصر)

2. أحداث لوحة المفاتيح (Keyboard Events)

  • keydown (عند الضغط على زر في الكيبورد)
  • keyup (عند رفع اليد عن الزر)
  • keypress (قديم وغير موصى به الآن)

3. أحداث النماذج (Form Events)

  • submit (إرسال النموذج)
  • change (عند تغيير قيمة حقل إدخال)
  • input (عند إدخال نص في الحقل)

4. أحداث الصفحة (Window Events)

  • load (عند تحميل الصفحة بالكامل)
  • resize (عند تغيير حجم النافذة)
  • scroll (عند تمرير الصفحة للأعلى أو للأسفل)

كيف نتعامل مع الأحداث؟

1. استخدام خاصية onclick داخل HTML

<button onclick="alert('تم الضغط على الزر!')">اضغط هنا</button>

❌ هذه الطريقة غير مستحبة لأنها تخلط بين HTML و JavaScript

2. تعيين الحدث داخل JavaScript

<button id="myBtn">اضغط هنا</button>

<script>
  const btn = document.getElementById("myBtn");
  btn.onclick = function () {
    alert("تم الضغط على الزر!");
  };
</script>

يمكن استخدامها، لكن إذا أضفت onclick جديد سيتم استبدال القديم.

3. الطريقة الأفضل: addEventListener

<button id="myBtn">اضغط هنا</button>

<script>
  const btn = document.getElementById("myBtn");

  btn.addEventListener("click", function () {
    alert("مرحبا بك!");
  });

  btn.addEventListener("click", function () {
    console.log("تم الضغط على الزر!");
  });
</script>

✅ مميزات addEventListener:

  • يسمح بإضافة أكثر من حدث لنفس العنصر.
  • يمكن إزالة الحدث لاحقًا باستخدام removeEventListener.
  • يعتبر أفضل ممارسة (Best Practice).

تمرير المعلومات داخل الأحداث

الأحداث تعطيك كائن يسمى Event Object يحتوي على تفاصيل الحدث:

document.addEventListener("keydown", function (event) {
  console.log("تم الضغط على المفتاح:", event.key);
});

أمثلة عملية

1. إظهار رسالة عند إرسال نموذج

<form id="myForm">
  <input type="text" placeholder="اكتب اسمك" />
  <button type="submit">إرسال</button>
</form>

<script>
  const form = document.getElementById("myForm");
  form.addEventListener("submit", function (e) {
    e.preventDefault(); // منع إعادة تحميل الصفحة
    alert("تم إرسال النموذج بنجاح!");
  });
</script>

2. تغيير لون الخلفية عند تمرير الماوس

<div id="box" style="width:200px; height:200px; background:lightblue;"></div>

<script>
  const box = document.getElementById("box");

  box.addEventListener("mouseover", () => {
    box.style.background = "orange";
  });

  box.addEventListener("mouseout", () => {
    box.style.background = "lightblue";
  });
</script>

الخلاصة

  • الأحداث هي الأساس لجعل الويب تفاعلي.
  • أفضل طريقة للتعامل معها هي addEventListener.
  • من خلال الأحداث يمكنك بناء صفحات ديناميكية وتجربة مستخدم أفضل.

✍️ تذكر دائمًا: JavaScript بدون أحداث = صفحة مملة!