HTML DOM يسمح جافا سكريبت للرد على أحداث HTML:
وردا على الأحداث
وجافا سكريبت يمكن تنفيذها عند حدوث الحدث، مثل عندما ينقر المستخدم على عنصر HTML.
لتنفيذ التعليمات البرمجية عندما ينقر المستخدم على عنصر، إضافة شفرة جافا سكريبت لسمة الحدث 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 سيتم تنفيذها عند النقر فوق الزر.
تعيين الأحداث باستخدام DOM HTML
دوم HTML يسمح لك لتعيين الأحداث لعناصر HTML باستخدام جافا سكريبت:
مثال
تعيين حدث onclick إلى عنصر الزر:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
انها محاولة لنفسك » في المثال أعلاه، وهي وظيفة اسمه displayDate تم تعيينه إلى عنصر HTML مع id="myBtn" .
سيتم تنفيذ الدالة عند النقر على زر.
و onload و onunload الأحداث
و onload و onunload يتم تشغيلها الأحداث عندما يدخل المستخدم أو يترك الصفحة.
و onload يمكن استخدام الحدث للتحقق من الزائر ونوع المتصفح وإصدار متصفح، وتحميل الإصدار المناسب من صفحة ويب استنادا إلى المعلومات.
و onload و onunload يمكن استخدامها الأحداث للتعامل مع ملفات تعريف الارتباط.
و onchange الحدث
و onchange وكثيرا ما يستخدم الحدث بالاشتراك مع التحقق من صحة المدخلات المجالات.
فيما يلي مثال لكيفية استخدام onchange . و upperCase() سيتم استدعاء الدالة عندما يتغير المستخدم المحتوى من حقل الإدخال.
و onmouseover و onmouseout الأحداث
و onmouseover و onmouseout الأحداث يمكن أن تستخدم لتحريك وظيفة عندما يصطاد الفئران المستخدم أكثر، أو الخروج منها، عنصر HTML:
و onmousedown ، onmouseup و onclick الأحداث
و onmousedown ، onmouseup ، و onclick الأحداث كلها أجزاء من الماوس الأيمن فوق. أولا عند النقر على زر الماوس، onmousedown يتم تشغيل الحدث، ثم، عندما يتم تحرير زر الماوس، onmouseup يتم تشغيل الحدث، أخيرا، عند اكتمال الماوس الأيمن فوق، و onclick يتم تشغيل الحدث.
المزيد من الأمثلة
عند_ضغط_الماوس وonmouseup
تغيير صورة عندما يحمل المستخدم باستمرار على زر الماوس.
ONLOAD
عرض مربع تنبيه عند الصفحة انتهاء التحميل.
تشغيل OnFocus
تغيير لون الخلفية من حقل الإدخال عندما يحصل على التركيز.
أحداث الماوس
تغيير لون عنصر عندما يتحرك المؤشر أكثر من ذلك.
HTML DOM الحدث كائن المرجعي
للحصول على قائمة من كافة الأحداث HTML DOM، أن ننظر في موقعنا كاملة HTML DOM الحدث كائن المرجعي .
اختبر نفسك مع تمارين!
التمرين 1 » التمرين 2» التمرين 3 »