آموزش جاوا اسکریپت - رویدادها

رویداد چیست؟

ارتباط جاوا اسکریپت با HTML از طریق رویدادها (Event) که در هنگام تعامل کاربر یا مرورگر با صفحه اتفاق می افتد، انجام می‌شود.

هنگامی که صفحه بارگیری می‌شود نیز یک رویداد صورت می‌گیرد. وقتی کاربر روی یک دکمه کلیک می‌کند، همان کلیک نیز یک رویداد است. مثال‌های دیگر شامل رویدادهایی مانند فشردن هر کلیدی، بستن پنجره، تغییر اندازه پنجره و غیره است.

توسعه دهندگان می‌توانند از این رویدادها برای اجرای پاسخ‌های کد شده در جاوااسکریپت استفاده کنند که می‌تواند باعث بسته شدن دکمه‌ها، نمایش پیام به کاربران، اعتبارسنجی داده‌ها و هر نوع پاسخ دیگری باشد.

رویدادها بخشی از مدل اشیاء سند (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>

نوع رویداد 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>

رویدادهای استاندارد HTML 5

رویدادهای استاندارد HTML 5 برای مرجع شما در اینجا لیست شده است. در اینجا، اسکریپت به معنی یک تابع جاوااسکریپت است که برای آن رویداد اجرا می‌شود.

صفت	مقدار	شرح
Offline	script	وقتی سند آفلاین می شود فعال می شود
Onabort	script	در هنگام وقفه درخواست فعال می‌شود.
onafterprint	script	پس از چاپ سند فعال می شود
onbeforeonload	script	قبل از بارگیری سند، راه‌اندازی می‌کند
onbeforeprint	script	قبل از چاپ سند فعال می شود
onblur	script	هنگامی که پنجره فوکوس خود را از دست می دهد فعال می شود
oncanplay	script	زمانی که رسانه می‌تواند پخش را شروع کند فعال می‌شود، اما ممکن است برای بافر کردن متوقف شود
oncanplaythrough	script	هنگامی که رسانه را می توان تا انتها پخش کرد، بدون توقف برای بافر کردن، فعال می شود
onchange	script	هنگامی که یک عنصر تغییر می کند فعال می شود
onclick	script	با کلیک ماوس فعال می شود
oncontextmenu	script	هنگامی که یک منوی زمینه فعال می شود، فعال می شود
ondblclick	script	هنگام دابل کلیک فعال می شود
ondrag	script	هنگامی که یک عنصر کشیده می شود، فعال می شود
ondragend	script	در پایان یک عملیات کشیدن فعال می شود
ondragenter	script	هنگامی که یک عنصر به یک هدف رها کردن معتبر کشیده شده است، فعال می شود
ondragleave	script	هنگامی که یک عنصر بر روی یک هدف رها سازی معتبر کشیده می شود، راه اندازی می شود
ondragover	script	در شروع یک عملیات کشیدن فعال می شود
ondragstart	script	در شروع یک عملیات کشیدن فعال می شود
ondrop	script	هنگامی که عنصر کشیده شده رها می شود، راه اندازی می شود
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	هنگامی که پیام راه اندازی می شود فعال می شود
onmousedown	script	با فشار دادن دکمه ماوس فعال می شود
onmousemove	script	هنگامی که نشانگر ماوس حرکت می کند فعال می شود
onmouseout	script	هنگامی که نشانگر ماوس از یک عنصر خارج می شود، فعال می شود
onmouseover	script	هنگامی که نشانگر ماوس روی یک عنصر حرکت می کند فعال می شود
onmouseup	script	هنگامی که دکمه ماوس آزاد می شود فعال می شود
onmousewheel	script	هنگامی که چرخ ماوس در حال چرخش است فعال می شود
onoffline	script	وقتی سند آفلاین می شود فعال می شود
onoine	script	هنگامی که سند آنلاین می شود فعال می شود
ononline	script	هنگامی که سند آنلاین می شود فعال می شود
onpagehide	script	هنگامی که پنجره پنهان است فعال می شود
onpageshow	script	هنگامی که پنجره قابل مشاهده می شود فعال می شود
onpause	script	هنگامی که داده رسانه متوقف می شود، فعال می شود
onplay	script	زمانی که داده‌های رسانه شروع به پخش می‌کنند فعال می‌شود
onplaying	script	هنگامی که داده های رسانه در حال پخش می شوند فعال می شود
onpopstate	script	هنگامی که تاریخچه پنجره تغییر می کند فعال می شود
onprogress	script	هنگامی که مرورگر در حال واکشی داده های رسانه است فعال می شود
onratechange	script	زمانی فعال می شود که سرعت پخش داده های رسانه تغییر کرده باشد
onreadystatechange	script	هنگامی که حالت آماده تغییر می کند، فعال می شود
onredo	script	هنگامی که سند یک تکرار را انجام می دهد، فعال می شود
onresize	script	هنگامی که اندازه پنجره تغییر می کند فعال می شود
onscroll	script	هنگامی که نوار پیمایش یک عنصر در حال پیمایش است فعال می شود
onseeked	script	زمانی فعال می شود که ویژگی جستجوی عنصر رسانه دیگر درست نباشد و جستجو به پایان رسیده باشد
onseeking	script	زمانی فعال می شود که ویژگی جستجوی عنصر رسانه درست باشد و جستجو آغاز شده باشد
onselect	script	هنگامی که یک عنصر انتخاب می شود، فعال می شود
onstalled	script	زمانی فعال می شود که در واکشی داده های رسانه خطایی وجود داشته باشد
onstorage	script	هنگامی که یک سند بارگیری می شود فعال می شود
onsubmit	script	هنگامی که فرمی ارسال می شود فعال می شود
onsuspend	script	زمانی فعال می‌شود که مرورگر داده‌های رسانه را واکشی می‌کند، اما قبل از واکشی کل فایل رسانه متوقف می‌شود
ontimeupdate	script	هنگامی که رسانه موقعیت پخش خود را تغییر می دهد فعال می شود
onundo	script	هنگامی که یک سند واگرد را انجام می دهد، فعال می شود
onunload	script	هنگامی که کاربر سند را ترک می کند فعال می شود
onvolumechange	script	هنگامی که رسانه صدا را تغییر می دهد، همچنین هنگامی که صدا روی "بی صدا" تنظیم شده است، فعال می شود
onwaiting	script	زمانی فعال می شود که پخش رسانه متوقف شود، اما انتظار می رود از سر گرفته شود

توابع - درس قبلی

درس بعدی - بررسی اجمالی اشیاء