آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش event ها در jquery

دوره های مرتبط با این مقاله

jQuery برای واکنش نشان دادن به رخدادهای که در یک سند HTML روی می دهند، به صورت بهینه تنظیم و طراحی شده است.
رخدادهای چارچوب کاریjQuery ، در واقع توابعی هستند که به مجرد اجرای یک اتفاق درهمچون HTM کلیک بر روی یک عنصر یا قرار گرفتن موس بر روی آن ، فراخوانی شده و اجرا می گردد.

اساسا رخداد (Event) به چه گفته می شود؟

کلیه ی اتفاق هایی که در یک صفحه ی وب روی می دهد و می توانیم به آنها واکنش نشان دهیم، رخداد (Event) نامیده می شود.

نمونه های یک Event
  • قرار گرفتن یا گذشتن نشانگر موس از روی یک عنصر
  • انتخاب و گزینش یک radio button
  • کلیک با موس بر روی یک المان

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

رخدادهای موس
رخدادهای ویژه ی صفحه کلید
رخدادهای مربوط به فرم
رخدادهای صفحه/پنجره
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave
blur
unload
چگونگی استفاده از رخدادها در jQuery

اغلب رخدادهای مدل شی گرای سند (DOM)، یک تابع متناظر و همتا در jQuery دارند.
برای تخصیص رخداد onclick به تمام المان های <p> پاراگراف های صفحه، می توانید به صورت زیر اقدام نمایید:

                        $("p").click();
                    

در قدم بعد بایستی تعریف کنید که به محض فعال (اجرا) رخداد، چه اتفاقی باید روی دهد. باید یک تابع را به عنوان آرگومان به رخداد مربوطه پاس دهید:

                        $("p").click(function(){
                        // action goes here!!
                        });
                    

توابع رخداد پرکاربرد در jQuery

تابع$(document).ready()

تابع $(document).ready() به ما این امکان را می دهد که به محض اتمام بارگذاری صفحه، تابع مورد نظر را اجرا کنیم.

تابع ()click

یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد؛ به عبارتی دیگر این متد یک تابع مدیریت کننده ی رخداد (event handler function) به المان HTML الحاق می کند.
همان طور که در نمونه ی زیر مشاهده می کنید، کاربر با کلیک بر روی هر کدام از تگ های <p> در صفحه ، پاراگراف مورد نظر را مخفی می کند:

نمونه یک

امتحان کنید

تابع ()dblclick

رخداد dblclick زمانی فراخوانی می شود که کاربر بر روی عنصر مورد نظر دوبار کلیک نماید . یکی از کاربردهای معمول این تابع: می توان کدی طراحی کرد که با دوبار کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن تغییر یافته و یا عنصراز نظر مخفی شود.

نمونه دو

 
امتحان کنید

تابع ()mouseenter

تابع زمانی اجرا می شود که اشاره گر موس وارد المان HTML می شود:

نمونه سه

امتحان کنید

تابع ()mouseleave

تابع به محض اینکه اشاره گر موس المان HTML را ترک می کند، اجرا می شود:

نمونه چهار

 
امتحان کنید

تابع ()mousedown

رویداد mousedown هنگامی فعال می شود که دکمه سمت چپ موس را بر روی عنصر مورد نظر فشار دهید :

نمونه پنج

 
امتحان کنید

تابع ()mouseup

رخداد mouseup زمانی اجرا می شود که دکمه فشرده شده موس بر روی المان مربوطه را آزاد کنید :

نمونه شش

امتحان کنید

تابع ()hover

hover( ) دو تابع را مشخص می کند که با گذر اشاره گر موس از روی المان مورد نظر ، فعال می شوند.
با قرار گرفتن اشاره گر موس کاربر روی عنصر HTML، متد اول اجرا می شود و زمانی که موس از روی آن کنار می رود (آن المان را ترک می کند)، متد دوم اجرا خواهد شد. Hover() باعث می شود هر دو رویداد mouseenter و mouseleave اجرا شوند.

نمونه هفت

امتحان کنید

تابع ()focus

زمانی که علامت چشمک زن اشاره گر موس روی یکی از اعضای فرم، مانند کادر متن یا تکس باکس قرار گیرد، این رخداد صدا زدهمی شود؛ به عبارتی دیگر رخداد focus زمانی روی می دهد که کنترل یا عنصر مورد نظر تمرکز (focus) برنامه را کسب کند.

نمونه هشت

امتحان کنید

تابع ()blur

به مجرد اینکه تمرکز (focus) از روی یکی از اعضای فرم خارج شود، رویداد ()blur فراخوانده و اجرا می شود.

نمونه نه

امتحان کنید

تابع ()on

این متد یک یا چندین event handler به المان های انتخابی الصاق می کند.
در این مثال یک رخداد کلیک به المان <p> پیوست می شود:

نمونه ده

امتحان کنید

در نمونه ی زیر چندین مدیریت کننده ی رخداد (event handler) به یک المان <p> ضمیمه می گردد:

نمونه یازده

  
امتحان کنید

امیدواریم که این مطلب در مورد آموزش Jquery و JavaScript برایتان مفید و مناسب بوده باشد.
در صورت داشتن هر گونه سوال، پیشنهاد و یا انتقاد حتماً از قسمت نظرات در پایین صفحه آن را برای ما ارسال کنید.

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

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


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

  • 3549
  •    1980
  • تاریخ ارسال :   1394/07/29

دانلود PDF دانلود سورس کد دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش event ها در jquery
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .