رویداد در جی کوئری چیست؟ رویدادهای جی کوئری چه مولفه هایی دارند؟ مفهوم رویداد چیست و در چه مواقعی به کار میرود؟ در این مطلب به صورت مفصل رویداد در جی کوئری رو بررسی میکنیم.
خب بریم رویداد در جی کوئری رو توضیح بدیم. اول ببینیم اصلا معنی رویداد در زبان jquery چی هست و چه مولفه هایی داره. توی اغلب وب سایت‌ها و وب اپلیکیشن‌ها کاربر یسری اکشن یا فعالیت انجام میده تا یه اتفاقی بیفته و یه عملیاتی انجام بشه. اینکه گفتیم یعنی چی؟ یعنی برای اینکه یه کاربر مثلا یه صفحه را باز کنه باید روی یه لینک یا دکمه یا هر چیز دیگه‌ای کلیک کنه.
یا مثلا برای ذخیره‌ی یه اسم یا فایل، باید دکمه‌ی ذخیره را بزنه تا اون اتفاق بیفته. خب حالا منظور از رویداد در جی کوئری چیه؟ رویداد در jquery یعنی هر اتفاقی که در سایت میفته از قبیل کلیک کردن ، دابل کلیک کردن ، هاور کردن و هر چیز دیگه ای از این دسته به اون یک رویداد گفته میشه. که در جاوا اسکریپت هم شاهدش هستیم.
توی مثالی که زدیم زدن روی دکمه میشه اکشن کاربر (action)، رویداد میشه کلیک کردن(event) و تابع میشه عمل ذخیره (function). به شکل زیر نگاه کنید تا بهتر متوجه بشید.
کتابخانه‌های جی کوئری یسری متدها برای پیاده‌سازی رویداد در جی کوئری فراهم کردند که برای رویدادهای DOM استفاده میشن. رویدادهای باعث میشن صفحات وب شما به صفحاتی پویا تبدیل بشن. یه event در جی کوئری نشون میده که در هر لحظه دقیقا چه اتفاقی قراره بیفته. معمولا رایج‌ترین ایونت‌هایی که برای صفحات وب تعریف میشن، ایونت‌های زیر هستند:
اگه بخوایم ایونت‌های جی کوئری را یکم دسته بندی شده‌تر نشون بدیم، باید بگیم این رویدادهای جی کوئری به دسته‌های زیر تقسیم میشن:
رویدادها ماوس:
رویدادهای کیبورد:
تفاوت Keydown و Keypress در اینه که Keydown برای تمام کلیدها اتفاده میشه ولی Keypress برای یک کاراکتر خاص.
رویدادهای فرم:
رویدادهای داکیومنت یا پنجره:
لیست زیر تعداد زیادی رویداد در جی کوئری را نشون میده که زیاد بهشون نیاز خواهید داشت.
$("p").click(function(){
// action goes here!!
});
$("p").dblclick(function(){
$(this).hide();
});
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
$("input").change(function(){
alert("The text has been changed.");
});
$("form").submit(function(){
alert("Submitted");
});
$("button").click(function(){
$("p").toggle();
});
$(window).unload(function(){
alert("Goodbye!");
});
$("input").select(function(){
alert("Text marked!");
});
$(window).resize(function(){
$('span').text(x += 1);
});
$("div").scroll(function(){
$("span").text(x += 1);
});
$("div").focusin(function(){
$(this).css("background-color", "#FFFFCC");
});
حالا که معنی رویداد در jquery را فهمیدیم و با انواعشون آشنا شدیم، بریم سراغ نحوه نوشتن رویداد در جی کوئری. خب قبل از هر چیزی ما باید کتابخونه ی جی کوئری رو در فایل هامون قرار بدیم. با وارد شدن به سایت جی کوئری اون رو دانلود کنید و درون فایل هاتون قرار بدین. درون فایل html یک تگ دایو با ایدی مدنظرتون قرار بدین. به طور مثال : </div id=”test”><div> رو مینویسیم.
و حالا میپردازیم به نحوه ی استفاده از event در جی کوئری:
خب ما اومدیم ایدی test رو select کردیم و گفتیم که اگر این دایو مربوط به این ایدی کلیک شد یه اتفاقی بیفته. (البته ما اتفاق رو نگفتیم ..اون اتفاق هرچیزی میتونه باشه:) ). و البته به جای کلیک از هر رویداد در جی کوئری دیگه ای که میخاین میتونین استفاده بکنین.
همون طور که میبینید رویدادهای جی کوئری زیادی با کاربردهای متفاوت و مفیدی وجود دارند که در مواقع نیاز ازشون استفاده میشه. که ما به برخی از اون ها پرداختیم.
یادگیری تمامی event ها در jquery نه تنها الزامی نیست بلکه توصیه هم نمیشه. تعداد زیادی event در جی کوئری وجود داره که بعید میدونم اصلا استفاده بشه و یه تعداد خاصی از اون ها هستن که در اکثر مواقع استفاده میشن. مثلا این خیلی واضحه که رویداد click از همه بیشتر و به دفعات زیادی مورد استفاده قرار میگیره.
تعدادی از اون ها هم هیچ وقت شرایطی در پروژه پیش نمیاد که به اون ها اصلا نیازی بشه. و تعداد زیادی از اون ها هم خیلی کم استفاده میشن که از نظر من هیچ نیازی نیست تا همه ی رویداد ها رو حفظ کنین یا بلد باشین. چون هر وقت تو پروژه تون به رویدادی نیاز داشتین ولی اسمش رو نمیدونستین یا فراموشش کردین میتونین با یه سرچ ساده در گوگل نازنین به جواب دلخواهتون برسین.
با این کار مهارت سرچ کردن شما که یکی از اساسی ترین مهارتی هست که هر برنامه نویسی باید بلد باشه رو در خودتون تقویت میکنین، چون برای رفع باگ هایی که پیش میاد و همچنین برای اپدیت کردن خودتون و خیلی جاهای دیگه حتما به این مهارت نیاز پیدا میکنین. و پیشنهاد میکنم زیاد ذهنتون رو درگیر یادگیری رویدادهای جی کوئری نکنین که شاید اصلا روزی به کارتون نیاد و در عوض تمرکزتون رو روی یادگیری مفاهیم پایه ای و اصلی بکنین ما بقی چیز ها در صورت نیاز با سرچ کردن پیدا میشن.
نحوه ی استفاده از رویداد در جی کوئری و به کار گیری اون ها و انواع مختلف استفاده از رویداد ها در جی کوئری در ویدئو به صورت مفصل تر گفته شده. برای یادگیری نحوه به کارگیری اون ها شما رو به ویدئوی اموزشی ارجاع میدم. امیدوارم مورد استفاده تون واقع شده باشه. روزتون خوش.
منبع:
