رویدادهای jQuery

مدیریت رویدادهای کلیک، ماوس، کیبورد و فرم با متد on()

رویداد چیست؟

رویداد (Event) اتفاقی است که برای عناصر صفحه می‌افتد: کاربر روی دکمه‌ای کلیک می‌کند، ماوس روی عنصری می‌رود، متنی تایپ می‌شود یا فرمی ارسال می‌شود. jQuery به شما اجازه می‌دهد به این رویدادها واکنش نشان دهید.

ساختار کلی پاسخ به رویداد:

$("selector").event(function() {
    // کدی که هنگام رخ دادن رویداد اجرا می‌شود
});

رویدادهای ماوس

رویدادچه زمانی رخ می‌دهد
clickکلیک روی عنصر
dblclickدوبار کلیک روی عنصر
mouseenterورود ماوس به عنصر
mouseleaveخروج ماوس از عنصر
mousedownفشردن دکمه ماوس روی عنصر
mouseupرها کردن دکمه ماوس
hoverترکیب mouseenter و mouseleave

مثال: hover

// متد hover دو تابع می‌گیرد: ورود و خروج ماوس
$("p").hover(
    function() {
        $(this).css("background-color", "yellow");  // ورود ماوس
    },
    function() {
        $(this).css("background-color", "white");   // خروج ماوس
    }
);

رویدادهای کیبورد

رویدادچه زمانی رخ می‌دهد
keypressفشردن و رها کردن یک کلید (کاراکترها)
keydownفشردن یک کلید
keyupرها کردن یک کلید
// نمایش آنی چیزی که کاربر تایپ می‌کند
$("input").keyup(function() {
    $("#preview").text($(this).val());
});

رویدادهای فرم

رویدادچه زمانی رخ می‌دهد
submitارسال فرم
changeتغییر مقدار عنصر (select، checkbox...)
focusفعال شدن عنصر (کلیک روی input)
blurاز دست رفتن فوکوس
// جلوگیری از ارسال فرم و بررسی آن
$("form").submit(function(event) {
    if ($("#email").val() === "") {
        alert("ایمیل را وارد کنید!");
        event.preventDefault();  // جلوگیری از ارسال
    }
});

رویدادهای سند و پنجره

رویدادتوضیح
document readyآماده شدن کامل DOM
resizeتغییر اندازه پنجره مرورگر
scrollاسکرول کردن صفحه
loadبارگذاری کامل صفحه و منابع (منسوخ در jQuery 3)

متد on(): روش مدرن و پیشنهادی

از jQuery نسخه ۱.۷ به بعد، متد on() روش استاندارد برای اتصال همه رویدادهاست:

// به‌جای .click() بنویسید:
$("button").on("click", function() {
    alert("کلیک شد!");
});

// چند رویداد با هم
$("p").on({
    mouseenter: function() {
        $(this).css("background", "yellow");
    },
    mouseleave: function() {
        $(this).css("background", "white");
    },
    click: function() {
        $(this).css("color", "red");
    }
});

مزیت بزرگ on(): تفویض رویداد (Event Delegation)

اگر عنصری بعد از اتصال رویداد ساخته شود (مثلاً با append)، رویدادهای معمولی روی آن کار نمی‌کنند. اما on() با تفویض رویداد این مشکل را حل می‌کند:

// رویداد به ul وصل می‌شود، نه به liها
// حتی liهایی که بعداً اضافه شوند هم کلیک را می‌گیرند!
$("ul").on("click", "li", function() {
    $(this).toggleClass("done");
});

حذف رویدادها با off()

// حذف همه رویدادهای کلیک
$("button").off("click");

// حذف همه رویدادها
$("button").off();

شئ رویداد (Event Object)

هر تابع رویداد، یک پارامتر شئ رویداد دریافت می‌کند که اطلاعات مفیدی دارد:

$("a").click(function(event) {
    console.log(event.type);      // نوع رویداد: click
    console.log(event.target);    // عنصری که رویداد روی آن رخ داد
    console.log(event.pageX);     // موقعیت افقی ماوس
    console.log(event.which);     // کد کلید فشرده‌شده

    event.preventDefault();       // جلوگیری از رفتار پیش‌فرض
    event.stopPropagation();      // جلوگیری از انتشار به والد
});
متدهای کوتاه مثل .click() و .change() هنوز کار می‌کنند و برای کدهای ساده مناسب‌اند؛ اما .on() انعطاف بیشتری دارد و برای رویداددهی به عناصر داینامیک ضروری است.

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط