فصل هفتم: رویدادها (Events) در اکما اسکریپت

07 شهریور 1397
es6-events-1

جاوا اسکریپت وسیله ای است که می توانید با آن به برنامه تان حالت تعاملی بدهید. جاوا اسکریپت برای این کار از مکانیزمی به نام رویداد (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 هنگامی که پخش فایل چند رسانه ای متوقف شده، اما انتظار می رود که دوباره پخش آن شروع شود، اتفاق می افتد
نویسنده شوید

دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.