قسمت دوم: رویدادها

سلام به شما همراهان روکسو. در قسمت قبل از دوره ی آموزشی جی کوئری، این کتابخانه قدرتمند را معرفی کردیم و همچنین با سینتکس و ساختار کلی آن آشنا شدیم و در ادامه برخی از سلکتورها را بررسی کردیم. در این قسمت به رویدادها در جی کوئری می پردازیم.

رویدادها (Events) چه هستند؟

کلیه اقدامات کاربر که یک صفحه وب م یتواند به آن ها پاسخ دهد رویداد نام دارد.

برای مثال رفتن موس روی یک عنصر html یک event است. کلیک روی یک دکمه از کیبورد هم یک رویداد است.

برخی از رویدادهای رایج در  DOM را در زیر مشاهده می کنید:

ساختار جی کوئری برای متدهای رویدادها

در جی کوئری بیشتر رویدادهای مربوط به DOM یک متد دارند تا با آن متد بتوان به آن رویداد اشاره کرد. برای مثال برای اختصاص رویداد کلیک کردن به همه پاراگراف های صفحه شما می توانید از کد زیر استفاده کنید:

$("p").click();

در قدم بعدی باید تعریف کنید که وقتی رویداد کلیک کردن اتفاق افتاد چه چیزی رخ دهد؟ در اصطلاح شما باید یک Function به رویداد خود پاس بدهید. برای این کار در پرانتر متد رویداد یک Function  به شکل زیر تعریف می کنیم:

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

رایج ترین متدهای جی کوئری برای رویدادها

$(document).ready()

این متد به ما اجازه می دهد که یک تابع را وقتی که سند به طور کامل بارگذاری شد اجرا کنیم. قبلا در قسمت ساختار کلی جی کوئری گفتیم که ما تمامی کدهای جی کوئری خود را درون این متد می نویسیم.

click()

متد کلیک به ما اجازه می دهد تا برای کلیک کردن روی یک عنصر HTML  یک تابع تعریف کنیم. برای مثال در کد زیر با استفاده از این متد و تعریف یک Function دستور می دهیم تا با کلیک بر روی هر پاراگراف آن پاراگراف مخفی شود.

$("p").click(function(){
  $(this).hide();
});

کلید واژه this در مثال بالا به خود عنصر اشاره دارد در واقع ما می گوییم روی هر پاراگرافی که کلیک شد همان پاراگراف را مخفی کن. اگر به جای this از تگ p استفاده می کردیم با کلیک بر روی هر پاراگراف کل پاراگراف های صفحه مخفی می شد.

dblclick()

این متد مانند متد کلیک است با این تفاوت که هنگامی تابع درون آن اجرا می شود که روی عنصر دوبار کلیک شود.

مثال:

$("p").dblclick(function(){
  $(this).hide();
});

mouseenter()

این تابع این متد زمانی اجرا می شود که موس وارد عنصر شود.

برای مثال در کد زیر اگر موس وارد عنصری با آی دی p1  شود پیامی به کاربر نمایش داده می شود.

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});

mouseleave()

این متد مانند متد قبل است با این تفاوت که تابع آن با خارج شدن موس از عنصر اجرا می شود.

مثال:

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});

mousedown()

این متد برای زمانی است که دکمه کلیک موس روی عنصر درحال کلیک است.

در مثال زیر  هنگامی که روی عنصر دکمه کلیک موس را فشار دهید پیامی نمایش داده می شود:

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});

mouseup()

این متد مانند متد قبل است با این تفاوت که تابع درون آن هنگامی اجرا می شود که دکمه کلیک موس رها شود.

مثال:

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});

hover()

این متد ترکیبی از متد mousenter و  mousleave است و دو تابع به عنوان ورودی دریافت می کند. یکی هنگام ورود موس به عنصر اجرا می شود و دیگری هنگام خروج موس از آن عنصر اجرا می شود.

مثال:

$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

در مثال بالا با ورود موس به عنصر یک پیام و با خروج موس یک پیام دیگر نمایش داده می شود.

focus()

این متد برای بخش های مختلف فرم ها استفاده می شود. برای مثال اگر فرمی با سه ورودی داشته باشیم روی هر input فرم که به اصطلاح  فوکوس کنیم رویداد این متد فعال می شود.

برای مثال در کد زیر می گوییم هنگامی که روی هر input  فوکوس شد و انتخاب شد رنگ پس زمینه آن را عوض کن:

$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});

(در قسمت های بعدی بیشتر با نحوه تعریف دستورات CSS در جی کوئری آشنا می شویم)

blur()

این متد نیز مانند متد قبلی در فرم ها استفاده میشود و کاربرد آن زمانی است که فوکوس از روی یک بخش فرم برداشته شود.

در مثال زیر هنگامی که input بعد از فرکوس از فوکوس خارج می شود رنگ پس زمینه آن تغییر می کند.

$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

متد on()

کاربرد این متد برای زمانی است که می خواهیم چند رویداد را برای یک عنصر مشخص کنیم. در این صورت به جای اینکه چندین بار عنصر مورد نظر را با استفاده از سلکتورها انتخاب کنیم آن را یک بار انتخاب می کنیم و رویدادهای مختلف را برای آن مشخص می کنیم . برای آشنایی با ساختار و نحوه استفاده از این متد به مثال زیر توجه کنید:

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

همانطور که در مثال بالا مشاهده می کنید ابتدا این متد را برای عنصر مشخص می کنیم و در ادامه برای برای هر رویداد بک تابع را تعریف می کنیم.

متدها و رویدادهایی که در این قسمت بررسی کردیم تنها بخشی از متدهای کتابخانه و رویدادها در جی کوئری بودند در قسمت های بعد با متدها و قابلیت های بیشتری از این کتابحانه جاوا اسکریپت آشنا می شوید.

در این قسمت از دوره آموزشی کتابخانه جی کوئری با رویدادها در جی کوئری و متدهای مربوط به آنها آشنا شدیم همچنین با برخی از متدهای پرکاربرد آشنا شدیم و نحوه تعریف توابع برای متدها را بررسی کردیم. در قسمت های بعد به قابلیت های دیگر کتابخانه جی کوئری خواهیم پرداخت.

منبع: سایت W3Schools