مشاوره رایگان

ورود عضویت کسب درآمد

سبد خرید شما 0

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

بررسی مفهوم رویداد یا Event در JavaScript جاوا اسکریپت

رویدادها در JavaScript

یک رویداد چیست؟

تعامل جاوا اسکریپت با 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>

خروجی

خروجی کد فوق به این صورت است:

رویداد 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) پخش وجود دارد ، راه اندازی می شود.

پکیج های آموزشی جدید

آموزش ساخت ادیتور Html

فصلِ: 1 , تعداد قسمت ها: 4 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش JAVASCRIPT

این فصل در یک نگاه:

در این مجموعه به آموزش کامل ckeditor از نصب آن تا شخصی سازی و افزودن امکانات اختصاصی به ان می پردازیم.…

با توجه به اینکه آموزش جامع و کاملی در مورد نحوه ایجاد و شخصی سازی یک ادیتور در وب سایت و صفحات وب، وجود نداشت برآن شدیم تا یک سری مجموعه آموزشی کامل و جامع در رابطه با این موضوع تهیه نماییم…

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

بررسی مفهوم رویداد یا Event در JavaScript جاوا اسکریپت

رویدادها در JavaScript

یک رویداد چیست؟

رویداد Onclick

خروجی

رویداد Onsubmit

مثال

رویداد onmouseover و onmouseout

خروجی

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

آیا نیاز به مدرک هم دارید؟