رویدادها در JQuery

رویدادها در 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> در صفحه کلیک کند، پاراگراف مورد نظر را پنهان می کند:

مثال

$(“p”).click(function(){
$(this).hide();
});

dblclick() رویداد :

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

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

مثال

$(“p”).dblclick(function(){
$(this).hide();
});

mouseenter() رویداد:

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

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

مثال

$(“#p1”).mouseenter(function(){
alert(“You entered p1!”);
});

mouseleave() رویداد:

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

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

مثال

$(“#p1”).mouseleave(function(){
alert(“Bye! You now leave p1!”);
});

mousedown() رویداد:

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

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

مثال

$(“#p1”).mousedown(function(){
alert(“Mouse down over p1!”);
});

mouseup() رویداد :

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

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

مثال

$(“#p1”).mouseup(function(){
alert(“Mouse up over p1!”);
});

hover() رویداد:

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

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

مثال

$(“#p1”).hover(function(){
alert(“You entered p1!”);
},
function(){
alert(“Bye! You now leave p1!”);
});

focus() رویداد :

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

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

مثال

$(“input”).focus(function(){
$(this).css(“background-color”,”#cccccc”);
});

blur() رویداد :

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

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

مثال

$(“input”).blur(function(){
$(this).css(“background-color”,”#ffffff”);
});

اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google