رویدادها (Events Reference)
در jQuery، رویدادهای jQuery یعنی واکنش به اتفاق های صفحه. مثلا کلیک روی دکمه، فشار دادن یک کلید، یا اسکرول کردن صفحه.
رویدادهای jQuery یعنی چه؟
رویداد (Event) یعنی اتفاقی که روی صفحه می افتد. مثلا کاربر کلیک می کند یا فرم را ارسال می کند. متد رویداد، تابعی در jQuery است که به این اتفاق وصل می شود.
در منبع، یک جدول بزرگ از متدهای رویداد jQuery وجود دارد. هر ردیف نام متد، توضیح کوتاه و گاهی وضعیت آن را نشان می دهد؛ مثلا برخی متدها منسوخ شده اند.
گروه های مهم متدهای رویداد در jQuery
در جدول رفرنس، متدهای رویداد jQuery را می توان در چند دسته دید:
- متدهای ساده مثل
click()،blur()،change()برای رویدادهای رایج. - رویدادهای صفحه کلید مثل
keydown()،keypress()،keyup(). - رویدادهای ماوس مثل
mouseenter()،mouseleave()،mousemove()،click()وdblclick(). - رویدادهای فرم مثل
submit()،focus()،focusin()،focusout()،select(). - رویدادهای پنجره مثل
scroll()وresize(). - متدهای شیء رویداد مثل
event.preventDefault()،event.stopPropagation()،event.which،event.target. - متدهای مدیریت هندلر مثل
on()،off()،one()و$.proxy().
نکته: در جدول، برای بعضی متدها نوشته شده Deprecated یا Removed. یعنی در نسخه های جدید دیگر پیشنهاد نمی شوند یا حذف شده اند؛ مثلا bind()، delegate()، live().
نمونه کد ساده با رویداد کلیک در jQuery
حالا یک نمونه ساده از استفاده از رویداد کلیک ببین. این مثال از متد on() و شیء رویداد استفاده می کند.
$(document).ready(function() {
$("button.show-message").on("click", function(event) {
event.preventDefault();
$("#result").text("روی دکمه کلیک شد!");
});
});
اینجا انتخاب گر button.show-message روی دکمه ها کار می کند. متد on() رویداد click را به دکمه وصل می کند. وقتی کلیک می شود، متن عنصر با id برابر result عوض می شود.
چطور از رفرنس رویدادها استفاده کنیم؟
برای کار با رفرنس رویدادهای jQuery می توانی این مسیر ساده را بروی:
- اول تصمیم بگیر دقیقا کدام رویداد مهم است؛ مثلا کلیک یا اسکرول.
- در جدول رفرنس، نام متد مناسب را پیدا کن؛ مثل
click()یاscroll(). - توضیح متد را بخوان و از همان نام در کدت استفاده کن.
اگر نیاز داری قبل از رویدادها انتخاب گرها را مرور کنی، صفحه انتخاب گرها (Selectors Reference) کمک بزرگی است. چون همیشه اول باید عناصر درست را انتخاب کنی.
وقتی تصویر کلی رفرنس برایت مهم است، می توانی به صفحه نمای کلی (Overview) سر بزنی. آن جا تمام دسته های اصلی رفرنس jQuery کنار هم دیده می شوند.
چند متد کلیدی شیء رویداد
در جدول، چند متد مهم روی شیء رویداد لیست شده است:
event.preventDefault()جلوی رفتار پیش فرض را می گیرد؛ مثلا ارسال فرم.event.stopPropagation()جلوی بالا رفتن رویداد در DOM را می گیرد.event.pageXوevent.pageYمکان ماوس روی صفحه را برمی گردانند.event.whichمی گوید کدام کلید یا دکمه ماوس فشرده شده است.event.targetمشخص می کند کدام عنصر رویداد را فعال کرده است.
نکته: این متدها کمک می کنند رفتار رویداد را دقیق تر کنترل کنی. مثلا روی یک کلیک خاص در بخشی از صفحه واکنش نشان دهی.
جمع بندی سریع
- رویدادهای jQuery برای واکنش به کلیک ها، کلیدها و اسکرول هستند.
- این صفحه مانند یک فرهنگ لغت متدهای رویداد عمل می کند.
- متدهایی مثل
on()وoff()برای مدیریت هندلرها مهم اند. - متدهای شیء رویداد، رفتار و جزئیات رویداد را کنترل می کنند.
- قبل از نوشتن کد، رفرنس رویدادها را سریع نگاه کن.