آموزش اکما اسکریپت - رویدادها (Events) در ECMAScript

جاوا اسکریپت وسیله ای است که می توانید با آن به برنامه تان حالت تعاملی بدهید. جاوا اسکریپت برای این کار از مکانیزمی به نام رویداد (Event) استفاده می کند. رویدادها یک بخش از سطح 3 مدل آبجکتی سند (DOM) است و هر عنصر html یک مجموعه از رویدادها دارد که می توان توسط کدهای جاوا اسکریپت آنها را پیاده سازی کرد.

یک رویداد، یک عمل یا اتفاق است که توسط نرم افزار تشخیص داده می شود. یک رویداد می تواند توسط کاربران و یا سیستم اتفاق بیفتد.

بعضی از رویدادهای رایج عبارتند از: کلیک کاربر روی یک دکمه، بارگزاری یک صفحه وب، کلیک روی یک لینک و مواردی از این قبیل. در زیر چند نمونه از رویدادهای رایج را توضیح داده ایم.

مدیریت رویداد

هنگام وقوع یک رویداد، برنامه مجموعه ای از وظایف مرتبط را اجرا می کند. بلوک کدی که این وظیفه را بر عهده دارد، eventHandler یا اداره کننده رویداد نامیده می شود.

هر عنصر html یک مجموعه ای از رویدادها دارد که به آن عنصر نسبت داده می شود. ما می توانیم تعریف کنیم که چطور رویدادها توسط اداره کننده رویداد پردازش می شود.

رویداد onClick

این رویداد، یکی از پرتکرارترین رویدادها است و هنگامی که کاربر دکمه چپ ماوس را کلیک کند، اتفاق می افتد. می توانید در این رویداد کدهای مربوط به اعتبارسنجی، هشدار و ... را قرار دهید.

مثال

<html> 
   <head> 
      <script type = "text/javascript">  
         function sayHello() {  
            document.write ("Hello World")  
         }   
      </script> 
   </head> 
   
   <body> 
      <p> Click the following button and see result</p> 
      <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
   </body> 
</html>

رویداد onSubmit

رویداد onSubmit وقتی اجرا می شود که شما یک فرم را submit کنید. شما می توانید کدهای مربوط به اعتبارسنجی فرم تان را در این رویداد تعریف کنید. مثال زیر نحوه استفاده از رویداد 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

رویدادهای استاندارد Html

رویدادهای استاندارد Html 5 در جدول زیر برای ارجاع شما فهرست شده است.script یک متد جاوا اسکریپت است که رویداد را اجرا می کند.

خصیصه	مقدار	توضیحات
offline	script	وقتی که صفحه به حالت آفلاین برود، اتفاق می افتد
onabort	script	یک رویداد برای انصراف دادن یک چیزی، را اجرا می کند
onafterprint	script	بعد از اینکه یک صفحه پرینت شد، اتفاق می افتد
onbeforeonload	script	قبل از بارگذاری صفحه، اتفاق می افتد
onbeforeprint	script	قبل از پرینت یک صفحه اتفاق می افتد
onblur	script	وقتی که تمرکز از روی یک پنجره خارج شود، اتفاق می افتد
oncanplay	script	هنگامی که یک فایل چند رسانه ای اجرا (play) شود، که ممکن است قبلا stop شده باشد، اتفاق می افتد
oncanplaythrough	script	هنگامی که یک فایل چند رسانه ای می تواند بدون توقف اجرا می شود، اتفاق می افتد
onchange	script	هنگامی که یک عنصر تغییر داده می شود، اتفاق می افتد
onclick	script	وقتی که ماوس کلیک شد، اتفاق می افتد.
oncontextmenu	script	هنگامی که منو زمینه (کلیک راست ماوس روی صفحه) اجرا شد، اتفاق می افتد
ondblclick	script	هنگامی که دابل کلیک شد، اتفاق می افتد
ondrag	script	وقتی که یک عنصر drag شود، اتفاق می افتد
ondragend	script	وقتی که عملیات drag به اتمام رسید، اتفاق می افتد.
ondragenter	script	هنگامی که یک عنصر به محدوده مجاز drop ،drag شود، اتفاق می افتد
ondragleave	script	هنگامی که یک عنصر محدوده مجاز drop را ترک کند، اتفاق می افتد.
ondragover	script	هنگامی که یک عنصر به محدوده مجاز drop، درگ شده است.
ondragstart	script	هنگام شروع عملیات drag اتفاق می افتد
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	هنگامی که داده های دیگر یک عنصر چندرسانه ای بارگذاری شد، اتفاق می افتد
onloadstart	script	هنگامی که مرورگر شروع به بارگذاری داده های چندرسانه ای میکند، اتفاق می افتد
onmessage	script	هنگامی که یک پیام(message) اتفاق می افتد
onmousedown	script	هنگامی که دکمه ماوس فشار داده شود، اتفاق می افتد
onmousemove	script	هنگامی که نشانگر ماوس حرکت کند، اتفاق می افتد
onmouseout	script	هنگامی که نشانگر ماوس از روی یک عنصر خارج شود، اتفاق می افتد
onmouseover	script	هنگامی که نشانگر ماوس روی یک عنصر قرار می گیرد، اتفاق می افتد
onmouseup	script	هنگامی که دکمه ماوس آزاد شود، اتفاق می افتد
onmousewheel	script	موقعی که دکمه وسط ماوس چرخید، اتفاق می افتد
onoffline	script	هنگامی که صفحه به حالت آفلاین می رود، اتفاق می افتد
ononline	script	هنگامی که صفحه آنلاین می شود، اتفاق می افتد
onpagehide	script	هنگامی که پنجره ناپدید می شود، اتفاق می افتد
onpageshow	script	هنگامی که پنجره پدیدار می شود، اتفاق می افتد
onpause	script	هنگامی که یک چندرسانه ای (شامل ویدیو و صوت و ...) متوقف می شود (pause)، اتفاق می افتد.
onplay	script	هنگامی که یک چندرسانه ای play می شود، اتفاق می افتد.
onplaying	script	هنگامی که چندرسانه ای شروع به پخش(play)کند، اتفاق می افتد
onpopstate	script	هنگامی که تاریخچه پنجره تغییر کند، اتفاق می افتد
onprogress	script	هنگامی که مرورگر چند رسانه ای را دریافت می کند، اتفاق می افتد
onratechange	script	هنگامی که نرخ پخش (play rate) یک چند رسانه ای تغییر کند، اتفاق می افتد
onreadystatechange	script	هنگامی که حالت آماده (ready state) تغییر کند، اتفاق می افتد
onredo	script	هنگامی که صفحه یک redo را اجرا کند، اتفاق می افتد
onresize	script	هنگامی که یک پنجره تغییر اندازه داده شود، اتفاق می افتد
onscroll	script	هنگامی که scrollbar یک عنصر scroll می شود، اتفاق می افتد
onseeked	script	هنگامی که خصیصه seeking یک عنصر چند رسانه ای دیگر true نیست، و seeking به انتها رسیده، اتفاق می افتد
onseeking	script	هنگامی که خصیصه seeking یک عنصر چند رسانه ای true است، و seeking (نوار پیگیری چند رسانه ای) شروع شده است، اتفاق می افتد
onselect	script	هنگامی که یک عنصر انتخاب می شود، اتفاق می افتد
onstalled	script	هنگامی اتفاق می افتد که یک خطا موقع دریافت فایل چند رسانه ای دریافت کنیم
onstorage	script	هنگامی که یک صفحه بارگذاری می شود، اتفاق می افتد
onsubmit	script	هنگامی که یک فرم ارسال می شود، اتفاق می افتد
onsuspend	script	هنگامی که مرورگر در حال دریافت یک فایل چندرسانه ای است، اما قبل از اتمام دریافت، متوقف می شود
ontimeupdate	script	هنگامی که محل پخش فایل چند رسانه ای تغییر کند، اتفاق می افتد
onundo	script	هنگامی که یک صفحه یک undo را اجرا می کند، اتفاق می افتد
onunload	script	هنگامی که کاربر صفحه را ترک می کند، اتفاق می افتد
onvolumechange	script	هنگامی که حجم صدای فایل چند رسانه ای تغییر می کند، و همچنین هنگامی که صدای آن mute می شود، اتفاق می افتد
onwaiting	script	هنگامی که پخش فایل چند رسانه ای متوقف شده، اما انتظار می رود که دوباره پخش آن شروع شود، اتفاق می افتد