الدرس الثاني عشر: الأحداث (Events) في JavaScript

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

---

1. ما هو الحدث؟

الحدث هو شيء يحدث في المتصفح، مثل:

• الضغط على زر (click)
• تحميل الصفحة (load)
• تمرير الماوس (mouseover)
• الكتابة في حقل إدخال (input)

---

2. ربط حدث بعنصر باستخدام HTML

<button onclick="sayHello()">اضغط هنا</button>

<script>
  function sayHello() {
    alert("مرحباً بك!");
  }
</script>

---

3. ربط حدث باستخدام JavaScript فقط (الطريقة الأفضل)

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

<script>
  let button = document.getElementById("myBtn");

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

الشرح:

• addEventListener تربط حدثًا (مثل click) بوظيفة (function).
• هذه الطريقة أكثر مرونة من كتابة onclick في HTML.

---

4. بعض الأحداث الشائعة:

الحدث	الوظيفة
click	عند الضغط على عنصر
mouseover	عند تمرير الماوس فوق عنصر
mouseout	عند خروج الماوس من العنصر
keydown	عند الضغط على زر في لوحة المفاتيح
submit	عند إرسال نموذج

---

5. مثال على حدث input:

<input type="text" id="nameInput" placeholder="اكتب اسمك">

<script>
  let input = document.getElementById("nameInput");

  input.addEventListener("input", function() {
    console.log("تم إدخال: " + input.value);
  });
</script>

---

✅ ملخص الدرس:

• الأحداث تسمح لجافا سكريبت بالتفاعل مع المستخدم.
• يمكن ربط الأحداث مباشرة في HTML أو باستخدام addEventListener.
• يوجد الكثير من أنواع الأحداث مثل: click، input، submit وغيرها.