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

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

Event چیست؟

تعامل جاوا اسکریپت با HTML از طریق event است که وقتی کاربر یا مرورگر یک صفحه را دستکاری می کند، رخ می دهد. زمانی که صفحه load(بارگذاری) می شود، یک event است. هنگامی که کاربر یک دکمه را کلیک می کند، کلیک کردن نیز یک event می باشد. مثال های دیگر شامل event هایی مانند فشوردن کلید، بستن پنجره، تغییر اندازه پنجره و غیره می باشد. توسعه دهندگان می توانند از این event ها برای اجرای پاسخ های جاوا اسکریپت کد شده استفاده نمایند که باعث می شود تا دکمه ها برای بستن پنجره ها، پیام هایی که برای کاربر نمایش داده می شود، داده هایی که مورد تایید قرار می گیرند، و تقریبا هر نوع پاسخ دیگر قابل اجرا باشد. event ها بخشی از مدل سطح سوم Object Model (DOM) هستند و هر عنصر HTML حاوی مجموعه ای از event هایی است که می تواند کد جاوا اسکریپت را فعال کند.لطفا جهت درک بهتر از event HTML  از این آموزش دیدن کنید.  در اینجا چند مثال برای درک بهتر  رابطه میان  event و جاوا اسکریپت را می بینید. 

onclick Event Type

این نوع event اغلب زمانی که کاربر بر روی دکمه سمت چپ موس کلیک می کند رخ می دهد. شما می توانید اعتبار سنجی ، هشدار و غیره را در برابر این نوع event قرار دهید.

مثال

<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 Event type

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

 مثال

مثال زیر نحوه استفاده از onsubmit را نشان می دهد. در اینجا پیش از submit اطلاعات فرم به وب سرور تابع  validate()را فرامی خوانیم. اگر تابع validate() ، true را برگرداند فرم submit می شود در غیر اینصورت submit اتفاق نمی افتد.

مثال زیر را امتحان کنید.

<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

این دو نوع event به شما کمک می کند تا با تصاویر و حتی متن جلوه های زیبا ایجاد کنید. رویداد onmouseover  زمانی رخ می دهد که ماوس خود را بر روی هر عنصر قرار می دهید و زمانی که ماوس خود را از آن عنصر حرکت می دهید، رویداد triggers 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>

خروجی

 

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

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

 

Attribute (خصوصیت) Value شرح
Offline script  زمانی که سند به حالت آفلاین برود، راه اندازی می شود.
Onabort script راه اندازی یک رویداد abort
onafterprint script راه اندازی پس از سند چاپ شده
onbeforeonload script پیش از بارگذاری اسناد، راه اندازی می شود
onbeforeprint script راه اندازی قبل از سند چاپ می شود
onblur script هنگامی که پنجره focus را از دست می دهد، فعال می شود
oncanplay script زمانی که رسانه ها می توانند شروع به بازی کنند، ممکن است باعث متوقف شدن بافر شود
oncanplaythrough script زمانی که رسانه ها می توانند به پایان برسند، بدون متوقف کردن بافر شدن، راه اندازی می شود
onchange script هنگامی که یک عنصر تغییر می کند راه اندازی می شود
onclick script راه اندازی کلیک موس
oncontextmenu script هنگامی که یک منوی زمینه فعال می شود، عمل می کند
ondblclick script دوبار کلیک بر روی یک موس عمل می کند
ondrag script هنگامی که یک عنصر کش می شود عمل می کند
ondragend script در انتهای یک عملیات drag (کشیدن) عمل می کند
ondragenter script هنگامی که یک عنصر به یک هدف valid drop کشیده (drag) می شود، عمل می کند
ondragleave script هنگامی که یک عنصر در یک هدف قطره معتبر کشف می شود، عمل می کند
ondragover script عملیات drag را آغاز می کند
ondragstart script عملیات drag را آغاز می کند
ondrop script باعث کاهش المنت drag می شود
ondurationchange script هنگامی که طول رسانه تغییر می کند، عمل می کند.
onemptied script زمانی که یک المنت منابع رسانه ناگهان خالی می شود، عمل می کند.
onended script زمانی که رسانه ها پایان می یابند، عمل می کند.
onerror script هنگامی که یک خطا رخ می دهد، عمل می کند.
onfocus script هنگامی که پنجره focusمی شود، عمل می کند.
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

زمانی که یک المنت scrollbar در حال حرکت است، عمل می کند

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

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

در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

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

Learn JavaScript

سرفصل ها

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

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

لطفا چند لحظه منتظر بمانید ...