رویداد های جاوا اسکریپت

آموزش وب ، javascript ، آموزشات فرعی ،
1436 بازدید
رویداد های جاوا اسکریپت
طرز استفاده و کار کردن با رویداد های جاوا اسکریپ

در این مطلب قرار است توضیح بدهم که رویداد های جاوا اسکریپت دقیقا چیست و چه کاربردی دارد. در مطلب کدَک نمایان و مخفی کردن شی اشاره ای به رویداد های جاوا اسکریپت شده بود.

اگر ما کد های جاوا اسکریپت را در بدنه ی فایل جاوا اسکریپت بنویسیم ، کد ها هنگامی که توسط مرورگر بارگذاری شوند ، اجرا خواهند شد. اما ما این را نمی خواهیم. اگر قرار باشد اینطور باشد که انیمیشن ها و تغییرات صفحه بی معنی خواهند بود. مثلا وقتی وارد یک صفحه می شویم ، قبل از این که ما روی دکمه ی "نمایش" کلیک کنیم ، قسمت مربوط به ما نمایش داده می شود. مطمئنا این چیزی نیست که ما نیاز داریم. برای این که این مشکل را حل کنیم ما از رویداد ها (events) جاوا اسکریپت استفاده می کنیم.

رویداد (evnent)

همان طور که از اسم این کلمه پیدا است ، این کلمه مربوط به مواقع خاصی می شود. مثلا هنگام کلیک ، هنگام نوشتن ، هنگام ورود موس و ...

یک سری از رویداد ها هستند که به کار کردن کاربر بستگی دارند و یک سری دیگر مربوط به خود مرورگر است و چه کاربر کاری را انجام بدهد ، چه انجام ندهد ، آن ها در موقع مشخص خودشان اتفاق می افتند.

در کل رویداد ها در جاوا اسکریپت به دسته های زیر تقسیم می شوند: برای مشاهده ی لیست رویداد های هر قسمت روی "فهرست" کلیک کنید.

  • رویداد های پنجره - Window events - فهرست
  • رویداد های فرم ها - Forms events - فهرست
  • رویداد های صفحه کلید - Keyboard events - فهرست
  • رویداد های موس - Mouse events - فهرست
  • رویداد های کلیپ بورد - Clipboard events - فهرست
  • رویداد های رسانه ها - Media events - فهرست
  • رویداد های متفرقه - Misc events - فهرست

 به طور کلی رویداد ها در جاوا اسکریپت به سه شکل قابل استفاده هستند:

1. در یک تگ:

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

<<<code>>>

<html-tag-name event=" javascript script "></html-tag-name>

example: <button onclick="alert('this is a alert');">click here</button>

<<</code>>>

2. ذخیره در قسمت مربوط به آن در یک کلاس جاوا اسکریپت:

این حالت برای رویداد های طولانی و ایجاد تابع برای یک رویداد بسیار مناسب است و برای کار با آن باید با کلاس ها در جاوا اسکریپت آشنا باشید.

<<<code>>>

element.event = javascript script;

example: document.getElementByTagName('body')[0].onload = function(){ alert('welcome'); };

<<</code>>>

3. ایجاد یک رویداد با متد addEventListener:

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

<<<code>>>

element.addEventListener( "event" , javascript function );

example: document.getElementById('toolstheme').addEventListener( "click" , function(){document.write('its that');} );

<<</code>>>

مثال های کد های بالا - دمو ساز

اگر سوالی دارید در بخش نظرات یا انجمن بپرسید. پایان!

رمز تمام فایل های فشرده
رمز فایل فشرده است.