Latest web development tutorials

الحدث HTML DOM

HTML DOM يسمح أحداث جافا سكريبت للرد على HTML.

أمثلة

Mouse Over Me
Click Me


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

عند حدوث الحدث، يمكنك تنفيذ جافا سكريبت، مثل عندما ينقر المستخدم على عنصر 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>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

محاولة »


سمات الحدث HTML

لتعيين الأحداث لعناصر HTML، يمكنك استخدام سمات الحدث.

أمثلة

تعيين إلى العنصر زر حدث عند _ النقر:

<button onclick =" displayDate() ">Try it</button>

محاولة »

في المثال أعلاه، عند النقر على زر، فإنه يؤدي وظيفة اسمه displayDate.


استخدام DOM HTML لتعيين الحدث

يسمح الحدث HTML DOM لك استخدام جافا سكريبت لتعيين عناصر HTML:

أمثلة

تعيين عند_النقر عنصر زر الحدث:

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

محاولة »

في المثال أعلاه، يتم تعيين وظيفة اسمه displayDate إلى معرف = myButn "عنصر HTML.

عند النقر على زر، وتنفيذ وظيفة.


onload و الحدث معالج onunload

عندما يدخل المستخدم أو يترك صفحة، وسوف يؤدي onload و الحدث معالج onunload.

ويمكن استخدام الحدث OnLoad للتحقق زوار نوع المتصفح والإصدار وذلك استنادا إلى المعلومات لتحميل إصدارات مختلفة من صفحة.

onload و معالج onunload الحدث للتعامل مع ملفات تعريف الارتباط.

أمثلة

<body onload ="checkCookies()">

محاولة »


الحدث عند_التغيير

وكثيرا ما يستخدم الحدث عند_التغيير للتحقق من صحة حقل الإدخال.

يوضح المثال التالي كيفية استخدام عند_التغيير. عندما يقوم المستخدم بتغيير محتويات حقل إدخال وسوف يطلق الكبيرة وظيفة ().

أمثلة

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

محاولة »


onmouseover وonmouseout الأحداث

onmouseover وonmouseout يمكن استخدامها لتحريك الأحداث وظائف عندما يتحرك مؤشر الماوس داخل أو خارج من العناصر.

أمثلة

بسيطة المثال onmouseover-onmouseout:

Mouse Over Me

محاولة »


عند_ضغط_الماوس، onmouseup والحدث onClick

عند_ضغط_الماوس، onmouseup عند _ النقر الحدث هو النقر بالماوس والعملية برمتها. أولا، عند النقر على زر الماوس، يؤدي عند_ضغط_الماوس الحدث، وبعد ذلك، عندما يتم تحرير زر الماوس، وسوف يؤدي onmouseup الحدث، وأخيرا، عندما الماوس انقر فوق إنهاء، يتم تشغيل الحدث onClick.

أمثلة

بسيطة عند_ضغط_الماوس-onmouseup سبيل المثال:

Click Me

محاولة »


HTML DOM الحدث كائن المرجعي

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