الدرس السابع والعشرون: الأحداث (Events) والتفاعل مع المستخدم في JavaScript

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

---

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

الحدث هو أي فعل يقوم به المستخدم على الصفحة، مثل:

• الضغط على زر (click)
• تحميل الصفحة (load)
• تمرير الفأرة (mouseover)
• إدخال نص (input)
• الضغط على زر في لوحة المفاتيح (keydown)

---

2. إضافة حدث باستخدام addEventListener

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

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

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

addEventListener تسمح بربط أكثر من حدث لنفس العنصر.

---

3. أنواع شائعة من الأحداث:

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

---

4. مثال على التفاعل مع input

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

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

  input.addEventListener("input", function () {
    output.textContent = "أهلاً، " + input.value;
  });
</script>

---

✅ ملخص الدرس:

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