jQuery Event Methods
جیکوئری مجموعهای غنی از متدهای رویدادها (Events) ارائه میدهد که کار با رویدادها در توسعه وب را سادهتر و روانتر میکند. این متدها به شما امکان میدهند که رویدادها را به عناصر متصل کرده، آنها را حذف کنید و رویدادها را به طور برنامهریزیشده تحریک کنید. در اینجا یک مرور کلی از مهمترین متدهای رویداد در جیکوئری آورده شده است:
متدهای اتصال رویدادها
on()
- یک یا چند هندلر رویداد را به عناصر انتخاب شده متصل میکند.
- نحو:
$(selector).on(event, childSelector, data, function)
- مثال:
$(“#btn”).on(“click”, function() {
alert(“دکمه کلیک شد!”);
});
off()
- هندلرهای رویداد متصل شده با
on()را حذف میکند. - نحو:
$(selector).off(event, childSelector, handler)
- مثال:
$(“#btn”).off(“click”);
one()
- یک هندلر رویداد متصل میکند که تنها یک بار اجرا میشود.
- نحو:
$(selector).one(event, data, function)
- مثال:
$(“#btn”).one(“click”, function() {
alert(“این فقط یک بار اجرا میشود!”);
});
متدهای تحریک رویدادها
trigger()
- به طور دستی یک رویداد را روی عناصر انتخاب شده تحریک میکند.
- نحو:
$(selector).trigger(eventType, [extraParameters])
- مثال:
$(“#btn”).trigger(“click”);
triggerHandler()
- مشابه
trigger()است، ولی رویداد به سلسلهمراتب DOM بالاتر نمیرود. - نحو:
$(selector).triggerHandler(eventType, [extraParameters])
متدهای کوتاه برای رویدادها
جیکوئری متدهای کوتاه و آسانی برای رویدادهای رایج فراهم کرده است:
رویدادهای ماوس:
click(),dblclick(),mouseenter(),mouseleave(),mousedown(),mouseup(),mousemove(),hover()- مثال:
$(“#btn”).click(function() {
alert(“کلیک شد!”);
});
رویدادهای صفحهکلید:
keydown(),keyup(),keypress()- مثال:
$(document).keydown(function(e) {
console.log(“کلید فشرده شده: “ + e.key);
});
رویدادهای فرم:
focus(),blur(),change(),submit(),select()- مثال:
$(“input”).focus(function() {
$(this).css(“background-color”, “#f0f0f0”);
});
رویدادهای پنجره/سند:
resize(),scroll(),load(),unload(),ready()- مثال:
$(window).resize(function() {
console.log(“پنجره تغییر اندازه داد”);
});
واگذاری رویدادها مفید است زمانی که با عناصر داینامیک کار میکنید.
- مثال:
$(document).on(“click”, “.dynamic-button”, function() {
alert(“دکمه اضافهشده داینامیک کلیک شد!”);
});
رویدادهای سفارشی
شما میتوانید رویدادهای خود را با استفاده از .on() و .trigger() ایجاد و مدیریت کنید.
- مثال:
$(document).on(“customEvent”, function(e, param1, param2) {
console.log(“رویداد سفارشی تحریک شد با:”, param1, param2);
});
$(document).trigger(“customEvent”, [“سلام”, “دنیا”]);
این متدها کار با رویدادها را در جیکوئری ساده و شهودی میکنند. اگر به جزئیات یا مثالهای خاصی نیاز دارید، خوشحال میشوم کمک کنم!
دیدگاهتان را بنویسید