الحدث onload :
وهو حدث التحميل ويحصل عندما يتم الانتهاء من تحميل صفحة الانترنت , اذاً نحن لانقوم بتفجير هذا الحدث وانما يتفجر تلقائيا عند الانتهاء من تحميل الصفحة .
مثال :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>onload Event</title>
</head>
<body onload="alert('Welcome to our page.');">
&nbsp;
</body>
</html>
عندما يتم تحميل صفحة الانترنت في المثال السابق تظهر رسالة ترحيب تلقائيا .
الحدث onunload :
وهو حدث الغاء التحميل ويحصل عندما يترك المستخدم صفحة الانترنت الحالية , اي عندما ينتقل المستخدم الى صفحة اخرى.
مثال :
سنقوم باضافة الحدث onunload الى المثال السابق بحيث يصبح لدينا حدثان الاول onload وينتج عنه رسالة ترحيب بالمستخدم عند دخوله للصفحة والثاني onunload وينتج عنه رسالة توديع للمستخدم عندما ينتقل الى صفحة اخرى ..
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>onload and onunload Event</title>
</head>
<body onload="alert('Welcome to our page.');" onunload="alert('Bye ! See you later');">
<a href="dbl_click.htm">Click Here !</a>
</body>
</html>
عندما نقوم بالضغط على الوصلة للانتقال الى صفحة اخرى يتم تفجير الحدث onunload ويعرض لنا رسالة التوديع وعندما نضغط زر موافق ok في رسالة التوديع عندها يتم الانتقال للصفحة الجديدة .
الحدث onmouseover :
يحصل هذا الحدث عندما نمرر مؤشر الفأرة فوق عنصر ما ويتفجر هذا الحدث بمجرد دخول المؤشر الى المنطقة التي يحتجزها العنصر لنفسه , وكأن مؤشر الفأرة طائرة تقوم بأختراق اجواء العنصر لذا يجب التصدي لها اي تفجير الحدث .
يعمل الحدث السابق غالبا مع الحدث onmouseout ويحصل هذا الحدث عندما يخرج مؤشر الفأرة من المنطقة التي يحتجزها العنصر لنفسه , اي عندما تبتعد الطائرة مغادرةً اجواء العنصر .
مثال :
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mouse over and out Events</title> </head> <body> <img src="../images/0.png" onmouseover="this.src='../images/1.png';" onmouseout="this.src='../images/0.png';" /> </body> </html>
في المثال السابق لدينا صورتين :
نقوم بالتبديل بينهما باستخدام الحدثين onmouseover و onmouseout اي عندما يكون مؤشر الفأرة فوق العنصر يتم عرض الصورة باللون البرتقالي وعندما يغادر مؤشر الفأرة العنصر يتم عرض الصورة باللون البني وذلك من خلال التحكم بقيمة الخاصية src للصورة ونلاحظ اننا استخدمنا الطريقة this التي تستخدم للاشارة الى العنصر ذاته .
عندما يغادر مؤشر الفأرة العنصر وهو الوضع الافتراضي ايضا , يكون الشكل :
وعندما يمر المؤشر فوق العنصر يكون الشكل :
فيما سبق قمت بتغطية بعض الاحداث وسأقوم بدراسة باقي الاحداث عندما نصل الى النماذج وقواعد التحقق من صحة مدخلات المستخدم , حيث ان الاحداث غالبا ما تستخدم بالتوافق مع التوابع وهذا ما سندرسه لاحقا .
