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

          حمیدرضا 
            بازدید : 2297
          چهارشنبه 20 خرداد 1394
           نظرات (0)
        

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

اگر ما کد های جاوا اسکریپت را در بدنه ی فایل جاوا اسکریپت بنویسیم ، کد ها هنگامی که توسط مرورگر بارگذاری شوند ، اجرا خواهند شد. اما ما این را نمی خواهیم. اگر قرار باشد اینطور باشد که انیمیشن ها و تغییرات صفحه بی معنی خواهند بود. مثلا وقتی وارد یک صفحه می شویم ، قبل از این که ما روی دکمه ی "نمایش" کلیک کنیم ، قسمت مربوط به ما نمایش داده می شود. مطمئنا این چیزی نیست که ما نیاز داریم. برای این که این مشکل را حل کنیم ما از رویداد ها (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>>>

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

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

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2239	snakeeye
طراحی باکس دانلود	6	2386	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8332	grimboy
انواع قالب اختصاصی	3	2016	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2434	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	8925	jack7788