أحداث جافا سكربت HTML DOM

يسمح HTML DOM لـ JavaScript برد الفعل على أحداث HTML:

النقر هنا!
انقر هنا

رد الفعل على الحدث

يمكن لتعليمات JavaScript تنفيذ الكود عند حدوث الحدث، مثل عند ضغط المستخدم على عنصر HTML.

لتنفيذ الكود عند ضغط المستخدم على عنصر، قم بإضافة كود JavaScript إلى خاصية الحدث في HTML:

onclick=JavaScript

مثال على حدث HTML:

  • عندما يضغط المستخدم على الفأرة
  • عند تحميل الصفحة
  • عند تحميل الصورة
  • عند تحرك الفأرة فوق العنصر
  • عند تغيير حقل الإدخال
  • عند تقديم نموذج HTML
  • عند ضغط المستخدم على المفاتيح

في هذا المثال، عند انقرار المستخدم <h1> سيتم تغيير محتواه:

مثال

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">انقر على هذا النص!</h1>
</body>
</html>

جربها بنفسك

في هذا المثال، يتم استدعاء الدالة من معالج الحادثة:

مثال

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">انقر على هذا النص!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

جربها بنفسك

خصائص الحوادث HTML

لإضافة حادثة إلى عنصر HTML، يمكنك استخدام خصائص الحوادث.

مثال

تخصيص الزر onclick حادثة:

<button onclick="displayDate()">جربها</button>

جربها بنفسك

في المثال السابق، سيتم تنفيذ دالة displayDate عند ضغط الزر.

تخصيص الحوادث باستخدام DOM HTML

يسمح لك DOM HTML باستخدام JavaScript بتخصيص الحوادث للأعمدة HTML:

مثال

تحديد الزر onclick حادثة:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

جربها بنفسك

في المثال السابق، تم تخصيص دالة displayDate إلى عنصر HTML ذو id="myBtn".

عند الضغط على الزر سيتم تنفيذ الدالة.

حادثة onload و onunload

سيتم إطلاق onload و حادثة onunload حادثة.

onload يمكن استخدام حادثة لتشخيص نوع المتصفح و إصدار المتصفح للباحث، ثم تحميل إصدار الصفحة المناسب بناءً على هذه المعلومات.

onload و حادثة onunload يمكن استخدام حادثة لتعامل الكوكيز.

مثال

<body onload="checkCookies()">

جربها بنفسك

حادثة onchange

حادثة onchange تستخدم حادثة onchange عادةً مع التحقق من صحة حقول الإدخال.

إليك كيفية استخدام حادثة onchange هذا المثال. عند تغيير المستخدم محتوى حقل الإدخال، سيتم استدعاء دالة upperCase().

مثال

<input type="text" id="fname" onchange="upperCase()">

جربها بنفسك

حادثة onmouseover و onmouseout

onmouseover و onmouseout يمكن استخدام الأحداث عند تحريك الفأرة فوق أو خارج عنصر HTML لتنفيذ دالة معينة:

النقر هنا!

جربها بنفسك

أحداث onmousedown، onmouseup و onclick

onmousedown, onmouseup و onclick تكون الأحداث جزءًا من حدث ضغط زر الفأرة الكامل.

أولاً عند ضغط زر الفأرة،onmousedown تم إطلاق الحدث؛ ثم عند إطلاق زر الفأرة،onmouseup تم إطلاق الحدث؛ وأخيرًا، عند انتهاء ضغط زر الفأرة،onclick تم إطلاق الحدث.

انقر هنا

جربها بنفسك

المزيد من الأمثلة

onmousedown و onmouseup
تغيير الصورة عند ضغط زر الفأرة.
onload
عرض نافذة تنبيه عند اكتمال تحميل الصفحة.
onfocus
تغيير لون الخلفية عند الحصول على تركيز حقل الإدخال.
أحداث الفأرة
تغيير لون العنصر عند تحريك مؤشر الفأرة عليه.

دليل مرجعي لعنصر أحداث HTML DOM

للحصول على قائمة كاملة بأحداث HTML DOM، يرجى زيارة دليل مرجعي لعنصر أحداث HTML DOM.