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

رویداد چیست؟

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

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

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

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

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

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

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

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

click()

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

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

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

dblclick()

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

مثال:

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

mouseenter()

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

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

mouseleave()

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

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

mousedown()

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

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

mouseup()

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

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

hover()

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

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

focus()

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

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

blur()

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

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

on()

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

$("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");
    }
});