5) رویداد ها در جی کوئری (Events)

تونل یادگیری جی کوئری

پس از اینکه با سلکتورها در Jquery و انواع آنها آشنا شدیم، لازم است تا رویداد ها (events) را یاد بگیریم. رویداد ها بیانگر این هستند که چه زمانی، چه دستوری روی سلکتور ما اعمال شود.

EVENT ها در جی کوئری

دستوراتی که جی کوئری برای رویداد ها در اختیار ما قرار میدهد ساده و جامع هستند که به راحتی میتوان تمامی تغییراتی که میخواهیم را، توسط رویداد ها مختلفی بر روی عناصر html خود اعمال کنیم.

نحوه نوشتن رویداد ها در جی کوئری

برای مشخص کردن یک رویداد یا Event ابتدا سلکتور را قرار میدهیم و پس از آن event را همراه آن می آوریم. به مثال زیر توجه کنید:

$("h1").click();

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

$("h1").click(function(){
// این دستورها اجرا شود
});

انواع رویداد در JQUERY

رویداد document.ready

این رویداد به ما این امکان را می دهد تا دستوراتی که در تابع آن قرار گرفته به محض بارگذاری صفحه اجرا شود. در قسمت دوم تونل در مورد این دستور بیشتر توضیح داده ایم.

رویداد ()click

رویداد ()click زمانی که کاربر روی سلکتور کلیک کند دستورات را اجرا میکند. کد زیر نشان میدهد که زمانی که بر روی هر کدام از تگ های h1 کلیک شود آن عنصر پنهان میشود.

$("h1").click(function(){
$(this).hide();
});

رویداد ()dblclick

رویداد ()dblclick زمانی دستورات را اجرا میکند که دو بار بر روی سلکتورمان کلیک کنیم. استفاده از این سلکتور در تلفن های همراه و تاچ کمی ما را با مشکل مواجه میکند اما بر حسب نیاز می توان از این رویداد استفاده کنیم.

$("h1").dblclick(function(){
$(this).hide();
});

رویداد ()mouseenter

دستورات رویداد ()mouseenter زمانی اجرا میشوند که نشانه گر موس بر روی سلکتورمان قرار بگیرد. به عنوان مثال، زمانی که نشانه گر موس را روی عنصر html با آی دی test قرار بگیرد یک پیغام به ما نمایش داده میشود.

$("#test").mouseenter(function(){
alert("You entered test!");
});

رویداد ()mouseleave

زمانی که نشانه گر موس را از روی سلکتور برداریم دستورات رویداد mouseleave در جی کوئری اجرا میشود. مثال زیر بر عکس مثال بالا عمل میکند و با خارج شدن موس به ما پیغام نشان میدهد.

$("#test").mouseleave(function(){
alert("You now leave test!");
});

رویداد ()mousedown

زمانی که یکی از کلید های راست، میانی یا چپ موس بر روی المان مشخص شده فشرده شده است و رها نشده است دستورات رویداد ()mousedown بر روی سلکتور اعمال میشود.

$(".p1").mousedown(function(){
alert("Mouse down");
});

رویداد ()mouseup

هنگامی که کلید راست یا میانی یا چپ موش را از حالت فشار داده شده رها کنیم دستورات رویداد ()mouseup در Jquery اجرا می شود.

$(".p1").mouseup(function(){
alert("Mouse up");
});

رویداد ()hover

رویداد hover متشکل از دو رویداد mouseenter و mouseleave است. هنگام کار با این رویداد از دو تابع استفاده میکنیم که به ترتیب اجرا میشوند.

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

رویداد ()focus

در فایل html که المان های فرم قرار دارند، زمانی که رو هر input کلیک کنیم و قصد وارد کردن اطلاعات را داشته باشیم این رویداد وارد صحنه میشود و دستورات موجود در رویداد ()focus آن اجرا می شود. در مثال زیر زمانی که روی هر input کلیک کنیم رنگ زمینه ی آن تغییر میکند.

$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});

رویداد ()blur

هر input که رویداد focus روی آن فعال شده را از دست بدهد این رویداد فعال میشود و دستورات داخل آن اجرا می شوند. مثال زیر بیانگر این ویژگی است.

$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});

استفاده از چند رویداد روی یک سلکتور در جی کوئری

برای اینکه از چند رویداد روی سلکتور استفاده کنیم از دستور on بهره میبریم. این دستور این امکان را فراهم میکند تا چندین رویداد را همزمان روی یک سلکتورتنظیم کنیم. مانند کد زیر از دستور on استفاده میکنیم.

$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});