loading...

ابزارها قالب

طرز استفاده و کار کردن با رویداد های جاوا اسکریپ

تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
آخرین ارسال های انجمن
حمیدرضا بازدید : 2187 چهارشنبه 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>>>

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

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

مطالب مرتبط
ارسال نظر برای این مطلب

نام
ایمیل (منتشر نمی‌شود)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B :S
کد امنیتی
رفرش
کد امنیتی
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
ابزارهای خاص
جعبه ی پیوند لینک کوتاه کن رایگان ارزیابی آنلاین سایت و وبلاگ به صورت رایگان
تبلیغات
تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده
تبلیغات متنی
درباره ما
لوگوی ابزارها قالب
سایت ابزارها قالب برای خاص بودن آفریده شده است. به امید این که خاص ترین باشیم.
اطلاعات کاربری
  • فراموشی رمز عبور؟
  • تبلیغات
    تبلیغات ارزان و پربازدهتبلیغات ارزان و پربازده

    آمار سایت
  • کل مطالب : 215
  • کل نظرات : 269
  • افراد آنلاین : 2
  • تعداد اعضا : 3196
  • آی پی امروز : 40
  • آی پی دیروز : 115
  • بازدید امروز : 299
  • باردید دیروز : 822
  • گوگل امروز : 3
  • گوگل دیروز : 6
  • بازدید هفته : 1,912
  • بازدید ماه : 10,409
  • بازدید سال : 101,779
  • بازدید کلی : 1,788,214
  • کدهای اختصاصی
    یادبود 175 شهید غواص
    یادبود 175 شهید غواص