أحداث JavaScript
إن الأحداث عبارة عن أفعال يتم إنشائها من خلال الجافاسكربت 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 .
تعليقات
إرسال تعليق