رویدادها در jQuery – بخش دوم

  • منتشر شده در تاریخ

آموزش جی کوئری

در بخش اول مدیریت رویدادها در jQuery با انواع رویدادهای جی کوئری و رویداد ماوس آشنا شدیم. در بخش دوم قصد داریم مابقی رویدادهای مهم را بررسی کنیم.

 

رویدادهای کیبورد (Keyboard)

یک رویداد کیبورد در زمانی که کاربر یک کلید را از روی مرورگر فشار یا رها می کند, اجرا می شود.

بعضی از پر استفاده ترین متدها جی کوئری برای مدیریت رویدادهای کیبورد را اینجا می بینید.

 

متد keypress()

متد keypress()  جی کوئری یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم) در زمانی که مرورگر یک ورودی کیبورد را از کاربر دریافت کند, متصل می کند.

مثال زیر یک پیام را زمانی که رویداد keypress رخ می دهد و همچنین تعداد فشردن دکمه را نیز نشان می دهد.

نکته: رویداد keypress مشابه رویداد keydown است, بجز کلیدهایی غیرقابل پرینت مثل Shift, Esc, Backspace, Delete و جهت نما و مشابه آن که رویداد keydown را اجرا می کنند نه رویداد keypress .

 

متد keydown()

متد keydown() در جی کوئری یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم) در زمانی که کاربر اولین کلید از کیبورد را فشار می دهد اجرا می شود, متصل می کند.

مثال زیر به شما یک پیام در زمان رخداد رویداد keydown و تعداد دفعاتی که کلیدهای روی کیبورد را فشار دادید, نمایش می دهد.

 

متد keyup()

متد keyup() جی کوئری, یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم) در زمانی که کاربر یک کلید فشرده شده را رها می کند, متصل می کند.

مثال زیر به شما یک پیام در زمان رخداد رویداد keyup و تعداد دفعاتی که کلیدهای روی کیبورد فشار و رها شده, نمایش می دهد.

نکته : رویدادهای کیبورد می توانند به هر المانی متصل شوند اما این رویداد فقط به المانی که روی آن متمرکز (focus) شده ارسال می شود. به همین دلیل است که رویدادهای کیبورد معمولا به کنترل های فرم مثل ورودی متن یا input ها متصل می شود.

 

رویداد های فرم (Form)

یک رویداد فرم زمانی رخ می دهد که کاربر مقداری را تغییر/وارد کند مثل تایپ کردن متن در یک ورودی, انتخاب یکی از گزینه های selectbox و غیره.

 

متد change()

متد change() جی کوئری یک تابع مدیریت رویداد را به المان های <input>, <textarea>, <select> که هنگام تغییر مقادیر آنها اجرا می شود را متصل می کند.

مثال زیر به شما یک پیام alert را در زمانی که یکی از گزینه های آبشاری انتخاب می شود را نمایش می دهد.

نکته: برای selectbox ها و radio-button ها, این رویداد به محض اینکه کاربر انتخابی می کند رخ می دهد برای برای ورودی های متن بعد از از دست دادن فوکوس روی المان اجرا می شود.

متد focus()

متد focus() یک تابع مدیریت رویداد را به المان های انتخاب شده (معمولا کنترل های فرم و لینک ها) در زمانی که روی آنها focus می شود را متصل می کند.

مثال زیر به شما یک پیام به هنگام دریافت focus روی ورودی متن input را نشان می دهد.

متد blur()

متد blur() یک تابع مدیریت رویداد را به المان های فرم مثل <input>, <textarea>, <select> در زمان از دست دادن focus را متصل می کند.

مثال زیر به محض از دست دادن focus یک متن را نمایش می دهد.

متد submit()

متد submit() یک تابع مدیریت رویداد را به المان های <form> در زمانی که کاربر قصد سابمیت/ارسال فرم را دارد متصل می کند.

مثال زیر بسته به مقدار وارد شده هنگام سابمیت فرم, یک پیام را نمایش می دهد.

نکته: یک فرم می تواند با کلیک روی دکمه submit یا فشردن Enter هنگام focus بودن فرم, سابمیت/ارسال شود.

 

رویدادهای سند / پنجره (Document / Window)

رویدادها در شرایطی که صفحه DOM آماده (ready) یا تغییر اندازه (resize) یا اسکرول (scroll) و … رخ دهند.

اینجا چندین متد پر استفاده برای این چنین رویدادها را بررسی می کنیم.

 

متد ready()

متد ready() یک تابع را برای اجرا شدن در هنگام بارگذاری کامل DOM , مشخص می کند.

مثال زیر متن پاراگراف ها به محص اینکه سلسله مراتب DOM کاملا ساخته و آماده دستکاری باشد, تغییر می دهد.

متد resize()

متد resize() یک تابع مدیریت رویداد (event handler) را به المان window متصل می کنید که هنگام تغییر اندازه پنجره مرورگر اجرا می شود.

مثال زیر به شما عرض و ارتفاع فعلی پنجره مرورگر را زمانی که سعی دارید اندازه آن را با کشیدن گوشه ها تغییر بدید را نشان می دهد.

متد scroll()

متد scroll در جی کویری یک تابع مدیریت رویداد را به پنجره مرورگر یا iframe و المان های قابل اسکرول متصل می کند که هنگام تغییر موقعیت اسکرول المان اجرا می شود.

 

امیدوارم در این بخش آموزش جی کوئری, از رویدادها در jQuery نهایت استفاده را برده باشید.

در بخش بعدی با افکت های جی کوئری , آشنا می شوید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دوره های آموزشی