آموزش event ها در jquery

سلام عزیزان ، حالتون خوبه بااموزشی دیگردرزمینه jquery درخدمت شما هستم.jQuery برای واکنش نشان دادن به رخدادهای که در یک سند HTML روی می دهند، به صورت بهینه تنظیم و طراحی شده است.

رخدادهای چارچوب کاریjQuery ، در واقع توابعی هستند که به مجرد اجرای یک اتفاق درهمچون HTM کلیک بر روی یک عنصر یا قرار گرفتن موس بر روی آن ، فراخوانی شده و اجرا می گردد.

اساسا رخداد (Event) به چه گفته می شود؟

کلیه ی اتفاق هایی که در یک صفحه ی وب روی می دهد و می توانیم به آنها واکنش نشان دهیم، رخداد (Event) نامیده می شود.

نمونه

قرار گرفتن یا گذشتن نشانگر موس از روی یک عنصر

انتخاب و گزینش یک radio button

کلیک با موس بر روی یک المان

اصطلاح “اتفاق افتادن” اغلب همراه با واژه ی “رخداد” بکار می رود. به عنوان مثال، رخداد keypress هنگامی اتفاق می افتد که یکی از دکمه های صفحه کلید را فشار دهید.

در جدول زیر، برخی از رویدادهای پرکاربرد در مدل DOM (مدل شی گرای سند) ارائه گردیده است:

رخدادهای موس

رخدادهای ویژه ی صفحه کلید

رخدادهای مربوط به فرم

رخدادهای صفحه/پنجره

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

blur

unload

چگونگی استفاده از رخدادها در jQuery

اغلب رخدادهای مدل شی گرای سند (DOM)، یک تابع متناظر و همتا در jQuery دارند.

برای تخصیص رخداد onclick به تمام المان های

پاراگراف های صفحه، می توانید به صورت زیر اقدام نمایید:

$(“p”).click();

در قدم بعد بایستی تعریف کنید که به محض فعال (اجرا) رخداد، چه اتفاقی باید روی دهد. باید یک تابع را به عنوان آرگومان به رخداد مربوطه پاس دهید:

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

توابع رخداد پرکاربرد در jQuery

تابع$(document).ready() :

تابع $(document).ready() به ما این امکان را می دهد که به محض اتمام بارگذاری صفحه، تابع مورد نظر را اجرا کنیم.

click()

یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد؛ به عبارتی دیگر این متد یک تابع مدیریت کننده ی رخداد (event handler function) به المان HTML الحاق می کند.

به مجرد اینکه کاربر بر روی یک المان HTML کلیک کند، رخداد onclick اتفاق می افتد (اجرا یا فعال می شود).

همان طور که در نمونه ی زیر مشاهده می کنید، کاربر با کلیک بر روی هر کدام از تگ های

در صفحه ، پاراگراف مورد نظر را مخفی می کند:

نمونه یک
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“p”).click(function () {
$(this).hide();
});
});

dblclick()

رخداد dblclick زمانی فراخوانی می شود که کاربر بر روی عنصر مورد نظر دوبار کلیک نماید . یکی از کاربردهای معمول این تابع: می توان کدی طراحی کرد که با دوبار کلیک کاربر بر روی یک عنصر رنگ پس زمینه آن تغییر یافته و یا عنصراز نظر مخفی شود.

نمونه دو
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“p”).dblclick(function () {
$(this).hide();
});
});

mouseenter()

تابع زمانی اجرا می شود که اشاره گر موس وارد المان HTML می شود:

نمونه سه
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#p1”).mouseenter(function () {
alert(“You entered p1!”);
});
});

mouseleave()

تابع به محض اینکه اشاره گر موس المان HTML را ترک می کند، اجرا می شود:

نمونه چهار
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#p1”).mouseleave(function () {
alert(“Bye! You now leave p1!”);
});
});

mousedown()

رویداد mousedown هنگامی فعال می شود که دکمه سمت چپ موس را بر روی عنصر مورد نظر فشار دهید :

نمونه پنج
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#p1”).mousedown(function () {
alert(“Mouse down over p1!”);
});
});

mouseup()

رخداد mouseup زمانی اجرا می شود که دکمه فشرده شده موس بر روی المان مربوطه را آزاد کنید :

نمونه شش
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“#p1”).mouseup(function () {
alert(“Mouse up over p1!”);
});
});

hover()

hover( ) دو تابع را مشخص می کند که با گذر اشاره گر موس از روی المان مورد نظر ، فعال می شوند.

با قرار گرفتن اشاره گر موس کاربر روی عنصر HTML، متد اول اجرا می شود و زمانی که موس از روی آن کنار می رود (آن المان را ترک می کند)، متد دوم اجرا خواهد شد. Hover() باعث می شود هر دو رویداد mouseenter و mouseleave اجرا شوند.

نمونه هفت
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(document).ready(function () {
$(“#p1”).hover(function () {
alert(“You entered p1!”);
},
function () {
alert(“Bye! You now leave p1!”);
});
});

focus()

زمانی که علامت چشمک زن اشاره گر موس روی یکی از اعضای فرم، مانند کادر متن یا تکس باکس قرار گیرد، این رخداد صدا زدهمی شود؛ به عبارتی دیگر رخداد focus زمانی روی می دهد که کنترل یا عنصر مورد نظر تمرکز (focus) برنامه را کسب کند.

نمونه هشت
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(document).ready(function () {
$(“input”).focus(function () {
$(this).css(“background-color”, “#cccccc”);
});
$(“input”).blur(function () {
$(this).css(“background-color”, “#ffffff”);
});
});

blur()

به مجرد اینکه تمرکز (focus) از روی یکی از اعضای فرم خارج شود، رویداد ()blur فراخوانده و اجرا می شود.

نمونه نه
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰

$(document).ready(function () {
$(“input”).focus(function () {
$(this).css(“background-color”, “#cccccc”);
});
$(“input”).blur(function () {
$(this).css(“background-color”, “#ffffff”);
});
});

on()

این متد یک یا چندین event handler به المان های انتخابی الصاق می کند.

در این مثال یک رخداد کلیک به المان

پیوست می شود:

نمونه ده
?
۱
۲
۳
۴
۵
۶
۷

$(document).ready(function () {
$(“p”).on(“click”, function () {
$(this).hide();
});
});

در نمونه ی زیر چندین مدیریت کننده ی رخداد (event handler) به یک المان

ضمیمه می گردد:

نمونه یازده
?
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵

$(document).ready(function () {
$(“p”).on({
mouseenter: function () {
$(this).css(“background-color”, “lightgray”);
},
mouseleave: function () {
$(this).css(“background-color”, “lightblue”);
},
click: function () {
$(this).css(“background-color”, “yellow”);
}
});
});