سبد (0)

رویدادها در jQuery

jQuery برای پاسخ دادن به رویدادهایی که در یک صفحه HTML اتفاق می افتد، بهینه شده است.

رویداد (Event) چیست؟

تمام کارهایی که در یک صفحه وب اتفاق می افتد و می توانیم به آنها پاسخ دهیم، رویداد (Event) گفته می شود.

مثال:

  • حرکت موس برروی یک عنصر
  • انتخاب یک radio button
  • کلیک کردن برروی یک عنصر

واژه "اتفاق افتادن" اغلب همراه با واژه ی "رویداد" استفاده می شود. مثال: رویداد keypress زمانی اتفاق می افتد که یکی از دکمه های صفحه کلید را فشار دهید.

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

رویدادهای موسرویدادهای صفحه کلیدرویدادهای فرمرویدادهای صفحه/پنجره
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

نحوه استفاده از رویدادها در jQuery

بیشتر رویدادهای مدل DOM، یک متد معادل در jQuery دارند.

برای اختصاص دادن رویداد onclick به تمام تگ های <p>، می توانید مانند زیر عمل کنید:

$("p").click();

قدم بعدی، مشخص کردن کاری است که باید به ازای رویداد onclick اتفاق بیافتد. باید یک تابع را به عنوان پارامتر به متد click ارسال کنید:

$("p").click(function(){
  // action goes here!!
});

رویدادهای رایج در jQuery

$(document).ready()

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

click()

این متد، یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد.

زمانی که کاربر روی یک عنصر HTML کلیک کند، رویداد onclick اتفاق می افتد.

در مثال زیر، زمانی که کاربر روی هر کدام از تگ های <p> در صفحه کلیک کند، پاراگراف مورد نظر را پنهان می کند:

مثال (رویدادها در jQuery)

$("p").click(function(){
  $(this).hide();
});
خودتان امتحان کنید »

dblclick()

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

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

مثال (رویدادها در jQuery)

$("p").dblclick(function(){
  $(this).hide();
});
خودتان امتحان کنید »

mouseenter()

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

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

مثال (رویدادها در jQuery)

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});
خودتان امتحان کنید »

mouseleave()

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseout یک عنصر، به آن اختصاص می دهد.

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

مثال (رویدادها در jQuery)

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
خودتان امتحان کنید »

mousedown()

این متد، یک تابع را برای پاسخ دادن به رویداد onmousedown یک عنصر، به آن اختصاص می دهد.

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

مثال (رویدادها در jQuery)

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});
خودتان امتحان کنید »

mouseup()

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseup یک عنصر، به آن اختصاص می دهد.

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

مثال (رویدادها در jQuery)

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});
خودتان امتحان کنید »

hover()

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

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

مثال (رویدادها در jQuery)

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});
خودتان امتحان کنید »

focus()

این متد، یک تابع را برای پاسخ دادن به رویداد onfocus یک عنصر، به آن اختصاص می دهد.

زمانی که علامت چشمک زن مکان نما روی یکی از اجزای فرم، مانند: Text Box قرار گیرد، رویداد onfocus اتفاق می افتد.

مثال (رویدادها در jQuery)

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
خودتان امتحان کنید »

blur()

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

زمانی که تمرکز از روی یکی از اجزای فرم خارج شود، رویداد onBlur اتفاق می افتد.

مثال (رویدادها در jQuery)

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
خودتان امتحان کنید »

jQuery Event Methods

For a full jQuery event reference, please go to our jQuery Events Reference.

نوشته شده توسط امیر پهلوان صادق
بازدید: 28962

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه