أحداث JavaScript HTML DOM
يسمح HTML DOM لجافا سكريبت بالتفاعل مع أحداث HTML:
الرد على الأحداث
يمكن تنفيذ JavaScript عند وقوع حدث ، مثل عندما ينقر المستخدم على عنصر HTML.
لتنفيذ التعليمات البرمجية عندما ينقر المستخدم على عنصر ، أضف كود JavaScript إلى سمة حدث HTML:
onclick=JavaScript
أمثلة على أحداث HTML:
- عندما ينقر المستخدم على الماوس
- عندما يتم تحميل صفحة ويب
- عندما تم تحميل الصورة
- عندما يتحرك الماوس فوق عنصر
- عندما يتم تغيير حقل الإدخال
- عندما يتم تقديم نموذج HTML
- عندما يضغط المستخدم على مفتاح
في هذا المثال ، يتغير محتوى <h1>العنصر عندما ينقر المستخدم عليه:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
في هذا المثال ، يتم استدعاء دالة من معالج الأحداث:
مثال
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
سمات حدث HTML
لتعيين أحداث لعناصر HTML ، يمكنك استخدام سمات الحدث.
مثال
تعيين حدث onclick لعنصر زر:
<button onclick="displayDate()">Try it</button>
displayDateفي المثال أعلاه ، سيتم تنفيذ الوظيفة المسماة عند النقر فوق الزر.
تعيين الأحداث باستخدام HTML DOM
يتيح لك HTML DOM تعيين الأحداث لعناصر HTML باستخدام JavaScript:
مثال
تعيين حدث onclick لعنصر زر:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
في المثال أعلاه ، يتم تعيين دالة مسماة displayDateلعنصر HTML بامتداد id="myBtn".
سيتم تنفيذ الوظيفة عند النقر فوق الزر.
أحداث التحميل والتفريغ
يتم تشغيل الأحداث onloadو onunloadعندما يدخل المستخدم الصفحة أو يغادرها.
يمكن onloadاستخدام الحدث للتحقق من نوع متصفح الزائر وإصداره ، وتحميل الإصدار المناسب من صفحة الويب بناءً على المعلومات.
يمكن استخدام الأحداث onloadوالأحداث onunloadللتعامل مع ملفات تعريف الارتباط.
مثال
<body onload="checkCookies()">
حدث onchange
غالبًا ما يتم onchangeاستخدام الحدث مع التحقق من صحة حقول الإدخال.
فيما يلي مثال على كيفية استخدام التغيير. سيتم upperCase()
استدعاء الوظيفة عندما يغير المستخدم محتوى حقل الإدخال.
مثال
<input type="text" id="fname"
onchange="upperCase()">
أحداث onmouseover و onmouseout
يمكن استخدام الحدثين onmouseoverand onmouseoutلتشغيل وظيفة عندما يقترب المستخدم من عنصر HTML أو يخرج منه:
أحداث onmousedown و onmouseup و onclick
تعتبر onmousedown، onmouseupو ، onclickوأحداث جميعًا أجزاء من النقر بالماوس. أولاً عند النقر فوق زر الماوس ، يتم تشغيل حدث onmousedown ، ثم عند تحرير زر الماوس ، يتم تشغيل حدث onmouseup ، وأخيرًا ، عند اكتمال النقر بالماوس ، يتم تشغيل حدث onclick.
مزيد من الأمثلة
تغيير صورة عندما يضغط المستخدم باستمرار على زر الماوس.
عرض مربع تنبيه عند انتهاء تحميل الصفحة.
بتغيير لون الخلفية لحقل الإدخال عندما يتم التركيز عليه.
تغيير لون العنصر عندما يتحرك المؤشر فوقه.
مرجع كائن حدث HTML DOM
للحصول على قائمة بجميع أحداث HTML DOM ، انظر إلى مرجع كائن حدث HTML DOM الكامل .