هیچ دوره ای در سبد آموزش شما وجود ندارد
رویدادها در جاوا اسکریپت
صفحه نخستیک رویداد چیست؟
تعامل جاوا اسکریپت با HTML از طریق رویدادهایی (events) صورت می پذیرد. رویدادها وقتی رخ می دهند که کاربر یا مرورگر یک صفحه را دستکاری می نماید.
وقتی صفحه ای بارگذاری می شود ، یک رویداد فراخوانی می گردد. هنگامی که کاربر یک کلید را کلیک می کند ، فرآیند کلیک کردن نیز یک رویداد است. مثال های دیگر برای رویدادها می توانند شامل فشار دادن یک کلید ، بستن پنجره ای یا تغییر اندازه یک پنجره و سایر موارد باشند.
توسعه دهندگان ، می توانند از این رویدادها برای اجرای پاسخ های جاوا اسکریپت کد شده استفاده نمایند. این پاسخ ها موجب می شوند کلیدهایی برای بستن پنجره ، پیام هایی برای نمایش به کاربران ، داده های اعتبارسنجی شده و تقریباً هر نوع دیگری از پاسخ های قابل تصور ، در نظر گرفته شوند.
رویدادها بخشی از Document Object Model (DOM) سطح 3 می باشند و هر عنصر HTML شامل مجموعه ای از رویدادها می باشد ، که این رویدادها می توانند کدهای جاوا اسکریپت را راه اندازی کنند.
رویداد Onclick
این رویداد ، متداول ترین نوع رویداد می باشد که وقتی کاربر کلید سمت چپ موس را کلیک می نماید ، رخ می دهد. ما می توانیم در برابر این رویداد ، رویدادهای مختلفی را تعریف نماییم که پس از انجام کلیک ، بروز می کنند ، مانند رویدادهای اعتبارسنجی ، هشدار دادن و غیره.
مثال:
مثال زیر را امتحان نمایید:
<html> <head> <script type = "text/javascript"> <!-- function sayHello() { alert("Hello World") } //--> </script> </head> <body> <p>Click the following button and see result</p> <form> <input type = "button" onclick = "sayHello()" value = "Say Hello" /> </form> </body> </html>
خروجی:
خروجی کد فوق به این صورت است:
Hello World
رویداد Onsubmit
Onsubmit ، رویدادی است که هنگامی که کاربر سعی در ثبت یک فرم می نماید ، رخ می دهد. ما می توانیم رویداد اعتبارسنجی را در برابر این رویداد اعمال نماییم.
مثال:
مثال زیر نحوه استفاده از رویداد Onsubmit را نشان می دهد. در اینجا ، ما تابع validate() را قبل از ارسال داده های یک فرم به وب سرور فراخوانی می کنیم. اگر تابع validate() مقدار true را باز گرداند ، فرم به وب سرور ارسال خواهد شد ، در غیر این صورت ، داده ها ارسال نمی شوند.
مثال زیر را امتحان نمایید:
<html> <head> <script type = "text/javascript"> <!-- function validation() { all validation goes here ......... return either true or false } //--> </script> </head> <body> <form method = "POST" action = "t.cgi" onsubmit = "return validate()"> ....... <input type = "submit" value = "Submit" /> </form> </body> </html>
رویداد onmouseover و onmouseout
این دو نوع رویداد به ما کمک خواهند کرد که افکت های زیبایی با تصاویر یا حتی با متن ها بسازیم. رویداد onmouseover ، وقتی راه اندازی می شود که اشاره گر موس روی هر عنصری برده شود و رویداد onmouseout وقتی راه اندازی می شود که اشاره گر موس از روی عنصر موردنظر کنار کشیده شود. مثال زیر را امتحان نمایید:
<html> <head> <script type = "text/javascript"> <!-- function over() { document.write ("Mouse Over"); } function out() { document.write ("Mouse Out"); } //--> </script> </head> <body> <p>Bring your mouse inside the division to see the result:</p> <div onmouseover = "over()" onmouseout = "out()"> <h2> This is inside the division </h2> </div> </body> </html>
خروجی:
خروجی حاصل از اجرای کد فوق به صورت زیر می باشد:
:Bring your mouse inside the division to see the result
This is inside the division
رویدادهای استاندارد HTML 5
در ادامه ، رویدادهای استاندارد HTML 5 به عنوان مرجع برای شما فهرست شده اند. در اینجا ، script نشان دهنده یک تابع جاوا اسکریپت برای اجرا در برابر آن رویداد می باشد.
صفت | مقدار | توضیحات |
Offline | Script | زمانی که document به صورت آفلاین اجرا می شود ، راه اندازی می شود |
Onabort | Script | در هنگام اجرای رویداد abort (بی نتیجه) ، راه اندازی می شود. |
Onafterprint | Script | بعد از این که سندی چاپ شود ، راه اندازی می شود. |
onbeforeonload | Script | قبل از این که سندی لود شود ، راه اندازی می شود. |
onbeforeprint | Script | قبل از این که سندی چاپ شود ، راه اندازی می شود. |
Onblur | Script | هنگامی که پنجره ای تمرکز را از دست دهد ، راه اندازی می شود. |
Oncanplay | Script | زمانی که رسانه ای شروع به پخش نماید ، راه اندازی می شود ، اما باید عملیات بافرینگ متوقف شود. |
Oncanplaythrough | Script | زمانی که رسانه می تواند تا انتها پخش شود ، بدون این که عملیات بافرینگ متوقف شود ، راه اندازی می شود. |
Onchange | Script | هنگامی که یک عنصر تغییر می یابد ، راه اندازی می شود. |
Onclick | Script | هنگامی که یک کلیک موس انجام می شود ، راه اندازی می شود. |
Oncontextmenu | Script | هنگامی که یک منو context فعال می شود ، راه اندازی می شود. |
Ondblclick | Script | هنگامی که دابل کلیک موس انجام می شود ، راه اندازی می شود. |
Ondrag | Script | هنگامی که یک عنصر درک می شود ، راه اندازی می شود. |
Ondragend | Script | در انتهای عملیات درگ کردن راه اندازی می شود. |
ondragenter | Script | هنگامی که یک عنصر درگ شده به یک هدف درست drop می شود ، راه اندازی می شود. |
ondragleave | Script | هنگامی که یک عنصر در حال درگ از روی یک هدف drop درست عبور می کند ، راه اندازی می شود. |
Ondragover | Script | در شروع یک عملیات درگ راه اندازی می شود. |
Ondragstart | Script | در شروع یک عملیات درگ راه اندازی می شود. |
Ondrop | Script | در هنگامی که یک عنصر درگ شده در حال drop شدن است ، راه اندازی می شود. |
Ondurationchange | Script | زمانی که طول رسانه تغییر یابد ، راه اندازی می شود. |
Onemptied | Script | هنگامی که یک عنصر رسانه منبع به طور ناگهانی خالی می شود ، راه اندازی می شود. |
Onended | Script | زمانی که رسانه به انتها می رسد ، راه اندازی می شود. |
Onerror | Script | زمانی که یک خطا رخ می دهد ، راه اندازی می شود. |
Onfocus | Script | زمانی که یک پنجره تمرکز را دریافت می کند ، راه اندازی می شود. |
Onformchange | Script | زمانی که یک فرم تغییر می یابد ، راه اندازی می شود. |
Onforminput | Script | زمانی که یک فرم ورودی کاربر را می گیرد ، راه اندازی می شود. |
Onhaschange | Script | زمانی که یک سند تغییر می یابد ، راه اندازی می شود. |
Oninput | Script | زمانی که یک عنصر ورودی کاربر را می گیرد ، راه اندازی می شود. |
Oninvalid | Script | زمانی که یک عنصر نامعتبر محسوب می شود ، راه اندازی می شود. |
Onkeydown | Script | زمانی که یک کلید فشار داده می شود ، راه اندازی می شود. |
Onkeypress | Script | زمانی که یک کلید فشار داده شده و رها می شود ، راه اندازی می شود. |
Onkeyup | Script | زمانی که یک کلید رها می شود ، راه اندازی می شود. |
Onload | Script | زمانی که سند لود می شود ، راه اندازی می شود. |
Onloadeddata | Script | زمانی که داده های رسانه لود شوند ، راه اندازی می شود. |
Onloadedmetadata | Script | زمانی که مدت زمان و سایر داده های رسانه از عنصر media لود شوند ، راه اندازی می شود. |
Onloadstart | Script | زمانی که مروگر شروع به لود داده های رسانه نماید ، راه اندازی می شود. |
Onmessage | Script | زمانی که یک پیام فعال شود ، راه اندازی می شود. |
Onmousedown | Script | زمانی که یک کلید موس فشار داده شود ، راه اندازی می شود. |
Onmousemove | Script | زمانی که اشاره گر موس حرکت کند ، راه اندازی می شود. |
Onmouseout | Script | زمانی که اشاره گر موس خارج از یک عنصر حرکت می کند ، راه اندازی می شود. |
Onmouseover | Script | زمانی که اشاره گر موس بر روی یک عنصر حرکت می کند ، راه اندازی می شود. |
Onmouseup | Script | هنگامی که یک کلید موس رها می شود ، راه اندازی می شود. |
Onmousewheel | Script | هنگامی که غلتک موس شروع به گردش می نماید، راه اندازی می شود. |
Onoffline | Script | زمانی که سند به صورت آفلاین اجرا می شود ، راه اندازی می شود. |
Onoine | Script | هنگامی که سند آنلاین باشد ، راه اندازی می شود. |
Ononline | Script | هنگامی که سند آنلاین باشد ، راه اندازی می شود. |
Onpagehide | Script | هنگامی که پنجره مخفی می شود ، راه اندازی می شود. |
Onpageshow | Script | هنگامی که پنجره قابل مشاهده می شود ، راه اندازی می شود. |
Onpause | Script | هنگامی که داده های رسانا paused می شود ، راه اندازی می شود. |
Onplay | Script | هنگامی که داده های رسانه در حال شروع به پخش شدن هستند ، راه اندازی می شود. |
Onplaying | Script | هنگامی که داده های رسانه شروع به پخش می شود ، راه اندازی می شود. |
Onpopstate | Script | هنگامی که پنجره history تغییر می کند ، راه اندازی می شود. |
Onprogress | Script | هنگامی که مرورگر در حال واکشی داده های رسانه می باشد ، راه اندازی می شود. |
Onratechange | Script | هنگامی نرخ پخش داده های رسانه تغییر می یابد ، راه اندازی می شود. |
Onreadystatechange | Script | هنگامی که وضعیت آماده (read-state) تغییر می یابد ، راه اندازی می شود. |
Onredo | Script | هنگامی که یک سند یک عمل redo را اجرا می کند ، راه اندازی می شود. |
Onresize | Script | هنگامی که یک پنجره تغییر اندازه می شود ، راه اندازی می شود. |
Onscroll | Script | هنگامی که یک عنصر scrollbar در حال scroll باشد ، راه اندازی می شود. |
Onseeked | Script | در زمانی که صفت عنصر جستجوی رسانه درست نباشد ، عملیات جستجو پایان یابد ، راه اندازی می شود. |
Onseeking | Script | در زمانی که صفت عنصر جستجوی رسانه درست باشد ، عملیات جستجو شروع شود ، راه اندازی می شود. |
Onselect | Script | هنگامی که یک عنصر جستجو شود ، راه اندازی می شود. |
Onstalled | Script | هنگامی که یک خطا در واکشی داده های رسانه بروز نماید ، راه اندازی می شود. |
Onstorage | Script | هنگامی که یک سند لود می شود ، راه اندازی می شود. |
Onsubmit | Script | هنگامی که یک فرم ثبت می شود ، راه اندازی می شود. |
Onsuspend | Script | هنگامی که مرورگر داده های رسانه را واکشی کرده باشد ، اما قبل از این که کل فایل رسانه واکشی شده باشد ، متوقف شود ، راه اندازی می شود. |
Ontimeupdate | Script | هنگامی که رسانه موقعیت پخش خود را تغییر می دهد ، راه اندازی می شود. |
Onundo | Script | هنگامی که یک سند یک عملیات undo را اجرا نماید ، راه اندازی می شود. |
Onunload | Script | هنگامی که کاربر از یک سند خارج شود ، راه اندازی می شود. |
Onvolumechange | Script | هنگامی که رسانه ای صدا را تغییر می دهد ، و هم چنین صدا به حالت “mute” تنظیم شود ، راه اندازی می شود. |
onwaiting | Script | هنگامی که حالت پخش رسانه متوقف می شود ، اما انتظار ادامه (resume) پخش وجود دارد ، راه اندازی می شود. |