تبلیغات

آموزش جی کوئری-رویدادهای جی کوئری

آموزش جی کوئری-رویدادهای جی کوئری

در جی کوئری استفاده از رویدادها ساده تر شده است

رویداد (Event) چیست؟
تمام کارهایی که در یک صفحه وب اتفاق می افتد و می توانیم به آنها پاسخ دهیم، رویداد (Event) گفته می شود.
مثال:
    حرکت موس برروی یک عنصر
    انتخاب یک radio button
    کلیک کردن برروی یک عنصر
واژه “اتفاق افتادن” اغلب همراه با واژه ی “رویداد” استفاده می شود. مثال: رویداد keypress زمانی اتفاق می افتد که یکی از دکمه های صفحه کلید را فشار دهید.

در جدول زیر، تعدادی از رویدادهای رایج در مدل DOM آورده شده است:

Dom-Events-FullKade.Com


نحوه استفاده از رویدادها در جی کوئری
بیشتر رویدادهای مدل DOM، یک متد معادل در jQuery دارند.
مثال: برای اختصاص دادن رویداد onclick به تمام تگ های <p>، می توانید مانند زیر عمل کنید:

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

دقت کنید ما یه تابعی رو در رویداد onClick دادیم و واسه بقیه رویداداهم به همین صورت عمل می کنیم.


 

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

لود شدن کامل صفحه

این متد به شما اجازه می دهد تا یک تابع را زمانی که صفحه کاملاً بارگذاری شد، اجرا کنید. این رویداد قبلاً در مطلب jQuery Syntax توضیح داده شده است.

کلیک شدن

این متد، یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد.
زمانی که کاربر روی یک عنصر HTML کلیک کند، رویداد onclick اتفاق می افتد.
در مثال زیر، زمانی که کاربر روی هر کدام از تگ های <p> در صفحه کلیک کند، پاراگراف مورد نظر را پنهان می کند:

دابل کلیک شدن

این متد، یک تابع را برای پاسخ دادن به رویداد ondblclick یک عنصر، به آن اختصاص می دهد.
زمانی که کاربر روی یک عنصر HTML دوبار کلیک کند، رویداد ondblclick اتفاق می افتد.

زمانی که ماوس میره رو چیزی

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseover یک عنصر، به آن اختصاص می دهد.
زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد، رویداد onmouseover اتفاق می افتد.

زمانی که ماوس از روی عنصور خارج می شه

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseout یک عنصر، به آن اختصاص می دهد.
زمانی که موس کاربر از روی یک عنصر HTML خارج می شود، رویداد onmouseout اتفاق می افتد.

زمانی که ماوس روی یه عنصر چپ کلیک کنه و دکخه چپ ماوس رو عنصر بره پایین

این متد، یک تابع را برای پاسخ دادن به رویداد onmousedown یک عنصر، به آن اختصاص می دهد.
زمانی که موس کاربر روی یک عنصر HTML قرار دارد و چپ کلیک کند، رویداد onmousedown اتفاق می افتد.

زمانی که ماوس روی یه عنصر چپ کلیک کرده و دکمه میاد بالا یا دکمرو ولش می کنه

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseup یک عنصر، به آن اختصاص می دهد.
زمانی که موس کاربر روی یک عنصر HTML قرار دارد و چپ کلیک را رها کند، رویداد onmouseup اتفاق می افتد.

رویداد ورود و خروج ماوس

این متد، همزمان دو تابع را برای پاسخ دادن به رویداد onmouseover و onmouseout یک عنصر، به آن اختصاص می دهد.
زمانی که موس کاربر روی عنصر HTML قرار گیرد، تابع اول اجرا می شود و زمانی که موس از روی آن خارج می شود، تابع دوم اجرا خواهد شد.

رویداد فوکوس

این متد، یک تابع را برای پاسخ دادن به رویداد onfocus یک عنصر، به آن اختصاص می دهد.
زمانی که علامت چشمک زن مکان نما ( همون که وقتی تایپ می کنید شبیه یه چیزی مثل این | خطه هس 😀 رو می گم خخخخخخخ) روی یکی از اجزای فرم، مانند: Text Box قرار گیرد، رویداد onfocus اتفاق می افتد.

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

برعکس فوکوس

این متد، یک تابع را برای پاسخ دادن به رویداد onBlur یک عنصر، به آن اختصاص می دهد.
زمانی که تمرکز از روی یکی از اجزای فرم خارج شود، رویداد onBlur اتفاق می افتد.

 

به زودیدرس قبلی
تبلیغات
0
کانال تلگرام فول کده
تبلیغات

پاسخ دهید

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

نظرات ثبت شده بدون دیدگاه