أحداث JavaScript

By


إن الأحداث عبارة عن أفعال يتم إنشائها من خلال الجافاسكربت JavaScript .



إنشاء حدث


في المثال التالي تم إنشاء حدث عند الضغط على الزر سيتم عرض التاريخ .

مثال
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}

</script>
</head>
<body>

<h1>صفحة جافاسكربت الأولى</h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">عرض التاريخ</button>

</body>
</html>



الأحداث


باستخدام الجافاسكربت يمكنك إنشاء صفحات انترنت ديناميكية علماً أن الأحداث عبارة عن أفعال يتم إنشائها من خلال الجافاسكربت JavaScript .

كل عنصر في HTML يمكن ادارج أحداث معه في الجافاسكربت . على سبيل المثال يمكن استخدام الحدث onClick على عنصر الزر ليشيربأن كود وظيفي سيتم استخدامه عند ضغط المستخدم على الزر . يمكن تعريف الأحداث في عناصر HTML .

أمثلة عن الأحداث :

  • عند الضغط بالماوس .

  • عند فتح صفحة أو صورة .

  • عند تمرير الماوس فوق نقطة معينة في صفحة الويب .

  • عند اختيار حقل نص في نماذج HTML .

  • عند الضغط على زر ارسال النموذج .

  • عند الضغط بزر لوحة الوسوم .

ملاحظة : عادة تستخدم الأحداث مع الأكواد الوظيفية أي أن الأكواد الوظيفية لن تعمل قبل حدوث الحدث .



استخدام الأحداث onLoad و onUnload


تحدث هذه الأحداث عند دخول المستخدم أو خروجه من صفحة الويب .

يستخدم الحدث onLoad عادة لفحص نوع متصفح المستخدم واصدار المتصفح وتحميل النسخة المناسبة لصفحة الويب التي تعتمد عليها المعلومات .

تتعامل كلاً من onLoad و onUnloadمع كوكيز المتصفح cookie التي تبقى في المتصفح عند دخول وخروج المستخدم من الصفحة . على سبيل المثال عند ظهور نافذة تسأل عن اسم المستخدم في الصفحة سيحفظ الاسم في ملف التأريخات و عند الدخول مرة أخرى على الموقع نفسه سترى مباشرة أنه سجل الدخول بدون طلب تسجيل الدخول " مرحباً بك .... " .



استخدام الأحداث onFocus و onBlur و onChange


تستخدم عادة الأحداث onFocus و onBlur و onChange مع تفعيل حقول النماذج forms .

في المثال التالي استخدمنا الحدث onChange وسيتم استدعاء الكود الوظيفي checkEmail() في حال قام المستخدم بتغيير محتوى الحقل .
<div dir="rtl">
ضع بريدك هنا : <input type="text" size="30" id="email" onchange="checkEmail()" />
</div>




استخدام onSubmit


يستخدم الحدث onSubmit لتفعيل جميع حقول النموذج قبل إرسالهم .

في المثال التالي سنتعلم كيفية استخدام حدث onSubmit . سيتم استدعاء الكود الوظيفي checkEmail() عند ضغط المستخدم على زر "ارسال" في النموج . عند عدم قبول قيمة الحقل سيتم إلغاء رز "ارسال" . وسيعود الكود الوظيفي checkEmail() بنتيجة اما صحيحة أو خاطئة . اذا عادت النتيجة بصيحية سيتم ارسال النموذج واذا عادت نتيجة خاطئة سيتم إلغاء ارسال النموذج .
<form method="post" action="xxx.htm" onsubmit="return checkForm()">




استخدام الحدث onMouseOver


يستخدم هذا الحدث ( عند تمرير الماوس على العنصر ) لإظهار رظيفة عند تمرير الماوس على عنصر HTML .

ليست هناك تعليقات:

إرسال تعليق