JS - Events الأحداث
JavaScript - الأحداث (Events)
🔸 الأحداث (Events) تُستخدم لتنفيذ كود JavaScript عندما يتفاعل المستخدم مع الصفحة، مثل الضغط على زر، تمرير الفأرة، كتابة في حقل، تحميل الصفحة... إلخ.
---🔹 أكثر الأحداث شيوعًا
onclick– عند الضغط بالماوسonmouseover– عند المرور بالفأرةonmouseout– عند إخراج المؤشرonchange– عند تغيير القيمة (مثل القوائم والنصوص)onkeydown– عند الضغط على زر في الكيبوردonload– عند تحميل الصفحة
🔹 مثال: تنفيذ حدث عند الضغط على زر
<button onclick="greetUser()">اضغط هنا</button>
<script>
function greetUser() {
alert("مرحبًا بك!");
}
</script>
🔹 استخدام الأحداث داخل HTML مباشرة
<h2 onmouseover="this.innerHTML='مرحبًا!'">
مرر المؤشر هنا
</h2>
🔹 إضافة حدث باستخدام JavaScript
document.getElementById("myBtn").onclick = function() {
alert("تم الضغط على الزر!");
};
📌 تأكد من أن العنصر موجود في الصفحة ويحمل المعرف المناسب.
---🔹 مثال كامل باستخدام حدث onload
<body onload="alert('تم تحميل الصفحة!')">
⚠️ ملاحظات مهمة
- يفضل فصل JavaScript عن HTML بقدر الإمكان لسهولة القراءة والصيانة.
- يمكنك استخدام
addEventListener()للحصول على مرونة أكبر في التعامل مع الأحداث (سيتم شرحه لاحقًا). - الأحداث أساس التفاعل مع المستخدم في صفحات الويب.
تعليقات
إرسال تعليق