JavaScript - DOM Events

JavaScript - DOM Events (الأحداث في DOM)

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

---

🔹 إضافة حدث باستخدام HTML

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

<script>
function sayHello() {
  alert("أهلًا بك!");
}
</script>

---

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

const btn = document.getElementById("myBtn");
btn.addEventListener("click", function () {
  alert("تم النقر!");
});

📌 هذه الطريقة مفضلة لأنها تفصل بين الهيكل والتفاعل.

---

🔹 أشهر أنواع الأحداث

• click - عند النقر على عنصر
• mouseover - عند تمرير المؤشر فوق عنصر
• keydown - عند الضغط على مفتاح في لوحة المفاتيح
• load - عند تحميل الصفحة
• submit - عند إرسال نموذج
• change - عند تغيير قيمة حقل إدخال

---

🔹 إزالة حدث باستخدام removeEventListener()

function showMessage() {
  alert("لن تتكرر هذه الرسالة!");
  btn.removeEventListener("click", showMessage);
}

btn.addEventListener("click", showMessage);

---

🔹 تمرير الحدث إلى الدالة

btn.addEventListener("click", function (event) {
  console.log("الهدف:", event.target);
});

---

⚠️ ملاحظات مهمة

• استخدام addEventListener يسمح لك بإضافة أكثر من حدث لنفس العنصر.
• دائمًا مرر كائن event إلى الدالة لمعرفة تفاصيل الحدث.
• يمكنك إلغاء السلوك الافتراضي (مثل إرسال نموذج) باستخدام event.preventDefault().