رویدادها (Events)
در این صفحه با رویدادهای jQuery آشنا می شوی. رویداد (Event) یعنی لحظه ای که در صفحه وب چیزی اتفاق می افتد؛ مثلا کلیک می کنی، ماوس را حرکت می دهی یا داخل یک فیلد تایپ می کنی.
رویداد (Event) در jQuery یعنی چه؟
هر کاری که کاربر روی صفحه انجام می دهد، یک رویداد است. مثلا ماوس را روی یک دکمه می بری، روی متن کلیک می کنی یا یک گزینه را از رادیو باتن انتخاب می کنی. jQuery برای این لحظه ها متد دارد تا بتوانی واکنش نشان دهی.
در HTML و جاوااسکریپت، این رویدادها را رویدادهای DOM می نامیم. DOM مخفف Document Object Model است و یعنی نسخه شی ءای صفحه. رویدادهایی مثل click، keydown، submit، scroll از همین نوع هستند.
سینتکس رویدادها در jQuery
در jQuery، تقریبا برای هر رویداد DOM یک متد وجود دارد. اول با یک انتخاب گر jQuery مثل $("p") عناصر را می گیری. بعد متد رویداد را صدا می زنی. مثلا برای وصل کردن رویداد کلیک به همه پاراگراف ها می توانی این کار را انجام دهی:
$("p").click();
اما این فقط رویداد را صدا می زند. برای این که بگویی هنگام کلیک چه اتفاقی بیفتد، باید یک تابع (Function) به متد رویداد بدهی. تابع یعنی بسته کدی که هنگام رویداد اجرا می شود.
$("p").click(function() {
// action goes here
});
الگوی کلی این است: رویداد موردنظر را روی عنصر وصل کن و داخل تابع، دستوری که می خواهی اجرا شود را بنویس. این پایه کار با رویدادهای jQuery است.
رویدادهای ماوس: click, dblclick و دوستان
یکی از مهم ترین رویدادهای jQuery، رویداد کلیک است. متد click() یک تابع را به رویداد کلیک عنصر وصل می کند. تابع وقتی اجرا می شود که کاربر روی عنصر کلیک کند.
در مثال منبع، وقتی روی یک پاراگراف کلیک می کنی، همان پاراگراف مخفی می شود. از $(this) برای اشاره به عنصر فعلی استفاده شده است. this در اینجا یعنی همان عنصری که رویداد روی آن اتفاق افتاده است.
$("p").click(function() {
$(this).hide();
});
همچنین متد dblclick() برای دوبار کلیک است. یعنی تابع وقتی اجرا می شود که کاربر سریع دو بار روی عنصر کلیک کند. مثال منبع دوباره همان پاراگراف فعلی را مخفی می کند.
$("p").dblclick(function() {
$(this).hide();
});
رویدادهای دیگر ماوس هم مهم هستند. مثلا mouseenter() وقتی اجرا می شود که نشانگر ماوس وارد یک عنصر شود. در مثال، وقتی ماوس روی پاراگراف با id برابر p1 می آید، یک هشدار نمایش داده می شود.
$("#p1").mouseenter(function() {
alert("You entered p1!");
});
متد mouseleave() برعکس است. وقتی ماوس از روی عنصر خارج می شود، تابع اجرا می شود و می توانی پیغام خروج نشان دهی.
$("#p1").mouseleave(function() {
alert("Bye! You now leave p1!");
});
دو رویداد دیگر، mousedown() و mouseup() هستند. اولی وقتی دکمه ماوس را پایین نگه می داری اجرا می شود. دومی وقتی دکمه را رها می کنی اجرا می شود. هر دو رویداد می توانند چپ، وسط یا راست ماوس را تشخیص دهند.
$("#p1").mousedown(function() {
alert("Mouse down over p1!");
});
$("#p1").mouseup(function() {
alert("Mouse up over p1!");
});
ترکیب رویدادهای ماوس با hover()
متد hover() ترکیبی از دو رویداد mouseenter() و mouseleave() است. این متد دو تابع ورودی می گیرد. تابع اول وقتی ماوس وارد عنصر می شود اجرا می گردد. تابع دوم وقتی ماوس عنصر را ترک می کند اجرا می شود.
در مثال منبع، وقتی وارد عنصر p1 می شوی یک پیغام خوش آمد نمایش داده می شود و هنگام خروج، پیغام خداحافظی ظاهر می شود. این روش برای ساخت منوهای تعاملی حسی شبیه بازی است.
$("#p1").hover(
function() {
alert("You entered p1!");
},
function() {
alert("Bye! You now leave p1!");
}
);
رویدادهای فرم: focus و blur
در فرم ها دو رویداد خیلی مهم داریم: focus و blur. رویداد focus() وقتی اتفاق می افتد که یک فیلد فرم فوکوس بگیرد. یعنی کاربر روی آن کلیک کند یا با Tab واردش شود. در مثال منبع، پس زمینه فیلد در حالت فوکوس خاکستری می شود.
$("input").focus(function() {
$(this).css("background-color", "#cccccc");
});
رویداد blur() برعکس است. وقتی کاربر از فیلد بیرون می آید و فوکوس را از دست می دهد، این رویداد اجرا می شود. در مثال منبع، پس زمینه دوباره سفید می شود. این رفتار برای ساخت فرم های شیک و قابل فهم بسیار مفید است.
$("input").blur(function() {
$(this).css("background-color", "#ffffff");
});
متد on() برای مدیریت چند رویداد
متد on() در jQuery روشی انعطاف پذیر برای مدیریت رویدادهای jQuery است. این متد می تواند یک رویداد یا چند رویداد را هم زمان به عناصر انتخاب شده وصل کند. همچنین در کدنویسی پیشرفته تر، برای رویدادهای داینامیک خیلی استفاده می شود.
در مثال اول، یک رویداد کلیک به همه پاراگراف ها وصل می شود. وقتی کاربر روی پاراگراف کلیک کند، همان پاراگراف مخفی می شود.
$("p").on("click", function() {
$(this).hide();
});
در مثال دوم، چند رویداد روی پاراگراف ها تنظیم شده است. وقتی ماوس وارد عنصر شود، رنگ پس زمینه خاکستری می شود. هنگام خروج آبی روشن می شود. هنگام کلیک کردن زرد می گردد.
$("p").on({
mouseenter: function() {
$(this).css("background-color", "lightgray");
},
mouseleave: function() {
$(this).css("background-color", "lightblue");
},
click: function() {
$(this).css("background-color", "yellow");
}
});
برای دیدن لیست کامل متدهای رویداد، می توانی صفحه مرجع رویدادها در منبع را ببینی: jQuery Events Reference.
گام های عملی برای تمرین رویدادها
- اول صفحه شروع کار jQuery را مرور کن و مطمئن شو که کتابخانه jQuery را درست به صفحه اضافه کرده ای.
- بعد صفحه انتخاب گرها در jQuery را بخوان تا بتوانی عناصر موردنظر را برای رویدادها پیدا کنی.
- یک فایل HTML ساده با چند پاراگراف، یک دکمه و یک فیلد input بساز و متدهای
click()،mouseenter()وmouseleave()را روی آن ها امتحان کن. - سپس برای فرم، رویدادهای
focus()وblur()را اضافه کن تا هنگام ورود و خروج از فیلد، رنگ پس زمینه تغییر کند. - در نهایت، همین مثال ها را با متد
on()بازنویسی کن تا درک عمیق تری از مدیریت رویدادهای jQuery داشته باشی.
جمع بندی سریع
- رویدادها لحظه هایی هستند که کاربر با صفحه تعامل می کند.
- در jQuery، متد رویداد مثل
click()روی انتخاب گر صدا زده می شود. - تابع ارسال شده به متد رویداد، رفتار هنگام وقوع رویداد را تعریف می کند.
- رویدادهای ماوس، فرم و صفحه مثل
click،focusوscrollبسیار پرکاربرد هستند. - متد
on()برای مدیریت چند رویداد و کدنویسی تمیز بسیار مفید است.