رویداد های jQuery

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

رویداد چیست؟

تمام اقدامات مختلف بازدید کننده، که یک صفحه وب می تواند به آن پاسخ دهد، رویداد نامیده می شود.
هر رویداد نشان دهنده لحظه زمانی دقیق هرآنچه که اتفاق می افتد است.
مانند :
•    حرکت نشانگر ماوس روی عنصر
•    انتخاب یک دکمه رادیویی(radio button)
•    کلیک روی یک عنصر


اصطلاح "fires/fired" اغلب برای رویداد ها استفاده می شود.

مثال: رویداد keypress  یک عنصر fired شد، یعنی زمانی که شما کلید را فشار داده اید.
رویداد های رایج DOM را در بخش زیر مشاهده می کنید:

Mouse Events
Keyboard Events
Form Events
Document/Window Events
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
mouseleave
 
blur
unload

ترکیب کد jQuery  برای متدهای رویداد

در jQuery  بسیاری از رویداد های DOM متدهای معادل دارند. برای معین کردن  رویداد کلیک برای تمام پاراگراف های یک صفحه می توانید چنین عمل کنید:

$("p").click();

قدم بعدی، تعریف عملی است که میخواهیم هنگام fire شدن رویداد انجام شود. باید یک تابع را داخل یک رویداد قرار دهید:

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

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

$(document).ready()

این متد به شما اجازه اجرای یک تابع را زمانی که صفحه کاملا بارگزاری شده است را می دهد.

click()

متد  click یک تابع اجراکننده رویداد را به عنصر html متصل می کند. هر تابعی زمانی که کاربر روی یک عنصر html  کلیک می کند اجرا می شود.

مثال :
زمانیکه رویداد کلیک روی عنصر <p>، fire می شود، عنصر <p>  مخفی شود.

رویداد click
$("p").click(function(){
    $(this).hide();
});
مشاهده مثال

dblclick()

رویداد dblclick یک تابع اجراکننده رویداد را به عنصر html متصل می کند.این تابع زمانی که کاربر روی عنصر html، double-clicks انجام داده باشد، اجرا می شود.

مثال:

رویداد دابل کلیک
$("p").dblclick(function(){
    $(this).hide();
});
مشاهده مثال

 

mouseenter()

متد mouseenter یک تابع اجراکننده رویداد را به عنصر html متصل می کند.
این تابع زمانی که نشانگر ماوس وارد عنصر html می شود، اجرا می شود.
مثال:

رویداد mouseenter
$("#p1").mouseenter(function(){
    alert("You entered p1!");
});
مشاهده مثال

mouseleave()

متد mouseleave یک تابع اجراکننده رویداد را به عنصر html متصل می کند.
این تابع زمانی که نشانگر ماوس عنصر html را ترک می کند (از محدوده عنصر خارج می شود)، اجرا می شود.
مثال:

رویداد mouseleave
$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});
مشاهده مثال

 

mousedown()

متد mousedownیک تابع اجراکننده رویداد را به عنصر html متصل می کند.
این تابع زمانی اجرا می شود که، نشانگر روی عنصر html بوده و دکمه چپ، راست و وسط ماوس فشار داده شود. در حالی که ماوس هنوز روی عنصر می باشد.
مثال:

رویداد mousedown
$("#p1").mousedown(function(){
    alert("Mouse down over p1!");
});
مشاهده مثال

mouseup()

متد  mouseup یک تابع اجراکننده رویداد را به عنصر html متصل می کند.
این تابع زمانی اجرا می شود که، نشانگر روی عنصر html بوده و دکمه چپ،راست و وسط ماوس رها شده باشد. در حالی که ماوس هنوز روی عنصر می باشد.
مثال:

رویداد mouseup
$("#p1").mouseup(function(){
    alert("Mouse up over p1!");
});
مشاهده مثال

hover()

متد hover شامل دو تابع mouseenter()  و mouseleave() است،. تابع اول زمانی که نشانگر ماوس وارد عنصر html  می شود، اجرا خواهد شد و تابع دوم زمانی  که نشانگر ماوس عنصر html را ترک می کند اجرا خواهد شد.
مثال:

رویداد hover
$("#p1").hover(function(){
    alert("You entered p1!");
},
function(){
    alert("Bye! You now leave p1!");
});
مشاهده مثال

focus()

این متد یک تابع اجراکننده رویداد را به  فیلدی از فرم html متصل می کند.
این تابع زمانی که فیلدی از فرم focus را دریافت می کند اجرا می شود.
مثال:

رویداد focus
$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});
مشاهده مثال

blur()

متد blur یک تابع اجراکننده رویداد را به  فیلدی از فرم html متصل می کند.
این تابع زمانی که فیلدی از فرم focus را ازدست می دهد، اجرا می شود.
مثال:

رویداد blur
$("input").blur(function(){
    $(this).css("background-color", "#ffffff");
});
مشاهده مثال

on()

متد on یک یا چند تابع اجراکننده رویداد را به عنصر انتخاب شده متصل می کند.
مثال:
اتصال رویداد کلیک به عنصر <p> :

متد on
$("p").on("click", function(){
    $(this).hide();
}); 
مشاهده مثال


مثال:
اتصال چند رویداد روی عنصر <p> :

رویداد چندگانه در یک عنصر
$("p").on({
    mouseenter: function(){
        $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
        $(this).css("background-color", "lightblue");
    },
    click: function(){
        $(this).css("background-color", "yellow");
    }
}); 
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط