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

رویداد ها در HTML کارهایی هستند که بر روی عناصر HTML انجام می شوند. وقتی که از جاوا اسکریپت در صفحات HTML استفاده شود، جاوا اسکریپت می تواند به این رویداد ها واکنش نشان دهد.

رویدادهای HTML

یک رویداد HTML می تواند کارهایی باشد که مرورگر انجام می دهد یا می تواند کاری باشد که کاربر انجام می دهد. در زیر چند مثال از رویداد های HTML را مشاهده می کنید:

• وقتی که لود شدنِ یک صفحه ی وبِ HTML به پایان می رسد.
• وقتی که یک فیلد ورودی(input field) تغییر داده شود.
• وقتی که بر روی یک دکمه ی HTML کلیک شود.

اغلب، وقتی که رویدادها اتفاق می افتند ممکن است بخواهیم کاری را انجام دهیم. جاوا اسکریپت به ما امکان می دهد تا، وقتی رویدادها تشخیص داده شدند، کدها(ی مشخصی) اجرا شوند. HTML به ما امکان می دهد تا خصوصیت های رویداد(event handler) به همراه کدهای جاوا اسکریپت را در عناصر HTML اضافه کنیم.

رویداد با استفاده از تک کوتیشن ها:

<element event='some JavaScript'>

رویداد با دابل کوتیشن ها:

<element event="some JavaScript">

در مثال زیر، یک خصوصیت onclick (به همراه کدها) به عنصر <button> اضافه شده است:

 <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

در مثال بالا، کد جاوا اسکریپت، محتوای عنصر با id="demo" را تغییر می دهد. در مثال بعدی، کد مورد نظر محتوایِ عنصرِ خودش را (با استفاده از دستور this.innerHTML ) تغییر می دهد:

<button onclick="this.innerHTML = Date()">The time is?</button>

کدهای جاوا اسکریپت، اغلب در چند خط طول می کشند. ما می توانیم با استفاده از خصوصیت رویدادها( مثلا خصوصیت رویداد onclick)، تابع ها را فراخوانی کنیم:

<button onclick="displayDate()">ساعت چند است؟</button> 

رویدادهای متداول در HTML

در زیر، یک لیست از برخی رویداد های پرکاربرد HTML را مشاهده می کنید:

 Event Handler در جاوا اسکریپت

از Event Handler ها می توانیم برای بکار بردن و تایید کردن ورودی کاربر و افعال کاربر و افعال مرورگر استفاده کنیم:

• از Event handler برای انجام کارهایی که همیشه به هنگام لود یک صفحه باید انجام شوند، استفاده می شود.
• از Event handler برای انجام کارهایی که به هنگام بسته شدن یک صفحه باید انجام شود، استفاده می شود.
• از Event handler برای انجام کارهایی که باید وقتی کاربر بر روی یک دکمه کلیک می کند، انجام شود، استفاده می شود.
• از Event handler برای تایید کردن محتوا، وقتی که یک کاربر داده ای را وارد می کند، استفاده می شود.

 برای اینکه جاوا اسکریپت بتواند با رویدادها کار کند، می توانیم متدهای زیادی را مورد استفاده قرار دهیم:

• ما به طور مستقیم می توانیم با استفاده از خصوصیت های رویداد HTML، کدهای جاوا اسکریپت را اجرا کنیم.
• ما با استفاده از خصوصیت های رویداد HTML می توانیم تابع های جاوا اسکریپت را فراخوانی کنیم.
• ما می توانیم تابع های event handler خود را در عناصر HTML انتساب دهیم.
• ما می توانیم از فرستاده شدن یا هندل شدن رویداها جلوگیری کنیم.