آموزش event ها در jquery

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

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

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

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

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

اغلب رخدادهای مدل شی گرای سند (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> ضمیمه می گردد: