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”, [“سلام”, “دنیا”]);
این متدها کار با رویدادها را در جیکوئری ساده و شهودی میکنند. اگر به جزئیات یا مثالهای خاصی نیاز دارید، خوشحال میشوم کمک کنم!
دیدگاهتان را بنویسید