آموزش jQuery- بخش سوم (رویدادها)

یکی از اهداف اصلی هر وب سایت تعامل با کاربر میباشد و سرعت پاسخ به کاربر یکی از فاکتورهای اصلی در میزان رضایت کاربران از وب سایت و یا کاربر پسندی وب سایت میباشد. بسیاری از وب سایتها ترجیح داده اند که درخواستهای کاربر را در سمت سرور پاسخ دهند که این امر نیازمند ارسال درخواست به سرور و انتظار پاسخ از سمت سرور میباشد به عبارت دیگر صفحه باید دوباره refresh شود که همین امر باعث کندی فرآیند پاسخ به کاربر میباشد که البته در برخی از مواقع این امر اجتناب ناپذیر میباشد. اما بسیاری از درخواستهای کاربر در سمت کلاینت قابل پاسخ میباشند و آن دسته از درخواستها که نیازمند پاسخ از طرف سرور میباشند نیز میتوانند با استفاده از AJAX سرعت پاسخدهی را بالا ببرند. به تعاملات کاربر با صفحه وب event یا رویداد گفته میشود مانند کلیک بر روی یک المان و یا بردن نشانه گر ماوس بر روی المان پاسخ به این رویدادها را اصطلاحاً event handling گفته میشود. در این مقاله به بررسی رویدادهای پر کاربرد در جاوا اسکریپت و نحوه هندل کردن آنها به کمک jquery خواهیم پرداخت.

مقالات مرتبط

آنچه که باعث می شود یک صفحه وب را تعاملی بنامیم استفاده و پیاده سازی هوشمندانه، events یا همان رویدادهاست. jQuery قادر است در مقابل action هایی که کاربر در صفحه انجام میدهد، عکس العمل نشان بدهد. مثلا وقتی mouse را روی یک menu کشویی میبرید، منو باز شده و سایر لینک ها نمایش داده میشود یا با کلیک یک دکمه ، فرمی برای شما باز می شود. در این مقاله به بررسی مهم ترین رویدادها در jQuery خواهیم پرداخت.

رویدادها(events) در jQuery

click این رویداد زمانی که کاربر بر روی عنصر موردنظر کلیک کند و سپس دکمه موس را رها کند. این رویداد بیشتر به لینک ها اختصاص داده میشود گرچه برای سایر المنت ها در صفحه هم میتوانید فراخوانی کنید.

mousedown این رویداد در نیمه اول فشردن موس فراخوانی میشود. مثلا برای مدیریت Drag کردن المنت ها.

mouseup این رویداد نیمه دوم فشردن موس است. یعنی لحظه ای که شما موس را رها می کنید. مثلا برای مدیریت Drop کردن المنتی که قبلا Drag شده.

mouseover وقتی شما موس خود را بر روی المنت ها در صفحه حرکت میدهید، این رویداد فراخوانی میشود. مثلا وقتی موس خود را بر روی یک منو کشویی میبرید ، این رویداد فراخوانی شده و submenu نمایش داده میشود.

mouseout این رویداد زمانی فراخوانی میشود که موس خود را به خارج از المنت مورد نظر حرکت میدهید. مثلا با کنار بردن موس خود از روی منو کشویی باز شده، منو بسته میشود.

load این رویداد زمانی فراخوانی میشود که که Browser تمامی فایل های مربوط به صفحه را دانلود کرده باشد. فایل های عکس، فایل های CSS، عکس هایی که به آن ها لینک داده شده و فایل های جاوااسکریپت.

resize این رویداد زمانی فراخوانی میشود که اندازه پنجره بروزر را کوچک یا بزرگ کنید و تغییر اندازه بدهید. مثلا میتوانید چک کنید که وقتی کاربر پنجره را maximize میکند ، اندازه عرض پروزر را چک کنید و تعداد ستون های نوشته تان را در layout کاهش یا افزایش دهید.

scroll این رویداد در زمان تغییر scrollbar اتفاق می افتد. یا حتی وقتی با دکمه های بالا و پایین scroll بروزر را حرکت میدهید. برخی برنامه نویسان این event برای تعیین مکان المنت ها در صفحه پس از scroll استفاده میکنند.

unload این رویداد زمانی فراخوانی میشود که کاربر صفحه جاری را ترک میکند یا پنجره بروزر بسته میشود. آخرین رویدادی که میتوانید کدهای اسکریپتی خود را قرار دهید. مثلا برای نمایش پیغام تشکر از بازدید کاربر یا هشدار اینکه فرمی را بطور کامل پر نکرده یا فرستادن داده ها به سرور قبل از اینکه کاربر صفحه را ببندد.

submit از رویدادهای مهم فرم است که زمانی دکمه submit را کلیک میکنید یا enter رافشار میدهید فراخوانی میشود. مثلا برای اعتبارسنجی داده فرستاده شده به سرور استفاده میشود.

reset این رویداد نیز همچون submit با تگ Form بکار برده میشود. برای برگرداندن فرم به حالت اولیه (پاک کردن فرم) استفاده میشود.

change یکی دیگر از رویدادهای فرم است که هنگام تغییر حالت وضعییت المنت های فرم فراخوانی میشود. مثلا هنگام کلیک دکمه رادیویی، یا انتخاب از یک drop down list(لیست کشویی)

focus این رویداد زمانی اتفاق می افتد که المنت موردنظر فکوس برنامه را بدست آورد و مرورگر برآن متمرکز باشد. مثلا برای تغییر پس زمینه یک text field زمانی که نشانگر موس در آن قرار گرفته باشد.

blur این رویداد برعکس رویداد Focus است. و زمانی اتفاق می افتد که focus برنامه از المنت موردنظر گرفته شده باشد. مثلا وقتی کاربرایمیل خود را در تکست باکس وارد میکند ، هنگام خروج از تکس باکس میتوانید با این رویداد چک کنید آیا ایمیل معتبر وارد کرده است یا نه.

keypress این رویداد جزء رویدادهای کیبورد محسوب میشود و هنگامی فراخوانی میشود که شما دکمه ای از صفحه کیبورد را فشرده باشید و تا مادامی که رها نکرده باشید این رویداد تکرار میشود.

keydown این رویداد نیز هم چون رویداد keypress است با این تفاوت که قبل از آن اجرا میشود. در مرورگر های فایرفاکس و اپرا یکبار اجرا میشود اما در اینترنت اکسپلورر و سافاری مانند keypress اجرا میشود.

keyup از دیگر رویدادهای صفحه کیبورد است که زمانی که شما دکمه ای از کیبورد را رها میکنید اتفاق می افتد.

کدنویسی رویدادها در jQuery

در مرحله اول ما باید المنتی که کاربر با آن در تعامل است را انتخاب کنیم.مثلا لینکی که کاربر بر آن کلیک کرده است. یا عکسی که کاربر موس خود را بر روی آن برده است. در مرحله دوم باید رویداد مورد نظر همراه با نقطه و پرانتز به آن اضافه کنیم. مثلا:

و در نهایت باید تابعی را مشخص کنیم که پس از روی دادن event میخواهیم اجرا شود. این تابع یک تابع از پیش تعریف شده میتواند باشد که نحوه استفاده از آن به شکل زیر است:

دقت کنید که پرانتزها در تابع حذف شده اند، یعنی استفاده از تابع startSlideShow به شکل زیر نادرست است:

یا اینکه میتوانیم یک anonymous function به رویدادمان پاس دهیم. anonymous function در واقع یک تابع بی نام است به شکل زیر:

در نهایت شکل کلی کدنویسی رویداد در jQuery یه شکل زیر خواهد بود:

jquery events

رویدادهای hover و toggle در jQuery

jquery رویداد مهمی برای مدیریت دو حالت تعاملی بسیار کاربردی در نظر گرفته است. یکی برای ورود و خروج موس بر یک المنت و دیگری برای switch کردن بین دو حالت موقع کلیک کردن.

hover() دو رویداد mouseover و mouseout معمولا با هم استفاده میشوند. بنابراین جی کوئری hover را برای اشاره به هر دو event بوجود آورده است. تفاوت این رویداد با سایر رویداد ها این است که دو تابع به عنوان آرگومان میپذیرد. اولین تابع برای زمانی که موس روی المنت موردنظر است و دومین تابع برای اجرا شدن هنگامی که موس از روی المنت خارج میشود:

مثلا شکل زیر نحوه استفاده از این رویداد را برای مدیریت یک منوی کشویی نشان میدهد:

Hover() Event

toggle() این رویداد نیز همچون رویداد hover است با این تفاوت که به جای رویداد موس به رویداد کلیک پاسخ میدهد. در کلیک اول تابع اول اجرا میشود و در کلیک دوم تابع دوم اجرا میشود.

به عنوان مثال فرض کنیم با کلیک بر دکمه منو میخواهیم submenu نمایش داده شود و باکلیک دوباره بر دکمه منو submenu از حالت نمایش خارج شود. خواهیم نوشت:

وقتی در یک بروزر رویدادی اتفاق می افتد ، بروزر اطلاعاتی راجع به آن رویداد را در یک event object ذخیره میکند. اطلاعاتی مثل مختصات عمودی و افقی موس، المنتی که رویداد بر پایه آن روی داده است و... یکی از موارد کاربرد این object جلوگیری از عملکرد پیش فرض رویداد است. مثلا عملکرد پیش فرض کلیک یک لینک هدایت کاربر به صفحه دیگر است و یا عملکرد پیش فرض فشردن دکمه submit ارسال اطلاعات به سرور است. برای جلوگیری از این عملکرد ها از تابع preventDefault در event object استفاده میکنیم:

در مقاله بعدی مروری خواهیم داشت بر مهم ترین effect های jQuery. با ما همراه باشید.