رویدادهای جی کوئری-درس پنجم

خانه » بلاگ » jquery » رویدادهای جی کوئری-درس پنجم

درس پنجم :  رویدادهای جی کوئری (JQuery Events)

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

در ذهن یک مخاطب این سوالات پیش می آید که :

• ایونت چیست؟
• از ایونت ها در جی کوئری چه استفاده ای می شود؟
• چند نوع ایونت در زبان جی کوئری وجود دارد؟
• هر کدام از این نوع ها چه بخش هایی را شامل می شوند؟

ایونت چیست؟

ایونت به مجموعه ای از اقدامات مختلف بازدیدکنندگان از یک صفحه وب می باشد و تمام کارهایی که کاربر می تواند در صفحه وب انجام دهد و صفحه وب قادر است به آنها پاسخ دهد ، رویداد (Event) گفته می شود. به عبارتی دیگر هر رویداد نماینده ی لحظه ای است که اتفاقی در صفحه رخ می دهد.

به عنوان مثال :

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

برای درک بهتر رویدادهای جی کوئری و نحوه کاربرد آنها بهتر است بدانید واژه « رویداد » اغلب به همراه فعل « اتفاق افتادن » به کار برده می شود .به عنوان مثال : رویداد ondblclick زمانی اتفاق می افتد که کاربر روی یک عنصر HTML دوبار کلیک کند.

از دستور ها در جی کوئری چه استفاده ای می شود؟

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

چند نوع ایونت در زبان جی کوئری وجود دارد؟

ایونت ها در جی کوئری به چهار دسته تقسیم می شوند:

1. ایونت ها برای موس ها
2. ایونت کیبورد
3. ایونت های فرم ها
4. ایونت های داکیومنت ها

در زیر، سعی شده تعدادی از رویدادهای جی کوئری رایج در مدل DOM به صورت دسته بندی آورده شود:

ایونت های موس ها به چند دسته تقسیم می شوند؟

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

• Click
• Dblclick
• Mouseenter
• Mouseleave

 کلیک ( click ) :

این ایونت با کلیک کردن روی یک بخش انتخاب شده در جی کوئری اضافه می گردد.درذ پایین مثالی برای شما می زنیم تا به شکل بهتری درک کنید.

<script>

$(document).ready(function(){

  $("p").click(function(){

    $(this).hide();

  });

});

</script>

<p> کلیک کنید تا این بخش از بین برود </p>

که با کلیک بر روی خروجی تگ p این متن از بین می رود.

 دابل کلیک:

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

<script>

$(document).ready(function(){

  $("#p1").dblclick(function(){

    alert("شما روی آی دی پاراگراف 1 دابل کلیک کردید");

  });

});

</script>

<p id="p1">روی این متن دابل کلیک کنید. </p>

که با کلیک بر روی روی متن یک اخطار برای شما باز می شود و متن اخطار را به شما نمایش می دهد.

Mouseenter

یکی دیگر از ایونت های موجود در جی کوئری موس اینتر می باشد به گونه که اگر موس وارد بخش مورد نظر شود تمام کار هایی که درون ایونت گفته شده انجام میگردد.

<script>

$(document).ready(function(){

  $("#p1").mouseenter(function(){

    alert(" روی گزینه اوکی کلیک کنید. " );

  });

});

</script>

<p id="p1"> موس را روی این پاراگراف بگذارید  </p>

با وارد شدن موس به محدوده پاراگراف میتوانید اخطار یا پیام نمایش داده شده در صفحه را ببینید.

Mouseleave

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

رویدادهای صفحه کلید :

این ایونت ها را می توانید به کمک کیبورد اجرا کنید. انواع این این ایونت ها:

• Keyup
• Keydown
• Keypress

این ایونت ها را به طور کلی برای شما توضیح می دهیم. زیرا همانند ایونت های بالا میتوانند در کد شما قرار بگیرند.

 keyup/keydown :

با فشار دادن دو دکمه بالا و پایین می توانید عملیات های نوشته شده بر روی کد های وبسایت خود را اجرا کنید.

 keypress :

با فشار دادن یک دکمه به صورت رندوم می توانید کد های جی کوئری نوشته شده را در سایت خود اجرا کنید.

رویداد های فرم :

• submit
• change
• focus
• blur

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

• Load
• resize
• scroll
• unload

نحوه استفاده از رویدادهای جی کوئری:

اکثر وقایعی که در یک صفحه وب اتفاق می افتد دارای یک تابع معادل در جی کوئری هستند .

به عنوان مثال:

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

$("p").ondblclick ();

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

("p").ondblclick (function(){

  // action goes here!!

});

 

رایج ترین رویدادهای جی کوئری:

این متد به شما اجازه می دهد تا یک تابع را زمانی که صفحه کاملاً بارگذاری شد، اجرا کنید.

$(document).ready()

این متد، یک تابع را برای پاسخ دادن به رویداد onclick یک عنصر، به آن اختصاص می دهد.

زمانی که کاربر روی یک عنصر HTML کلیک کند، رویداد onclick اتفاق می افتد.

click()

 

مثال:

در کد زیر زمانی که کاربر روی هر کدام از تگ های  <p> در صفحه کلیک کند، پاراگراف مورد نظر پنهان می شود .

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

این متد، یک تابع را برای پاسخ دادن به رویداد ondblclick یک عنصر، به آن اختصاص می دهد.

dblclick()

مثال :

در کد زیر زمانی که کاربر روی یک عنصر HTML دابل کلیک کند، رویداد ondblclick اتفاق می افتد.

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

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseover یک عنصر، به آن اختصاص می دهد.

mouseenter()

مثال :

در کد زیر زمانی که موس کاربر روی یک عنصر HTML قرار می گیرد، رویداد onmouseover اتفاق می افتد.

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

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseout یک عنصر، به آن اختصاص می دهد.

mouseleave()

مثال:

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

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

این متد، یک تابع را برای پاسخ دادن به رویداد onmousedown یک عنصر، به آن اختصاص می دهد.

mousedown()

مثال :

در کد زیر زمانی که موس کاربر روی یک عنصر HTML قرار دارد و چپ کلیک کند، رویداد onmousedown اتفاق می افتد.

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

این متد، یک تابع را برای پاسخ دادن به رویداد onmouseup یک عنصر، به آن اختصاص می دهد.

mouseup()

مثال :

در کد زیر زمانی که موس کاربر روی یک عنصر HTML قرار دارد و چپ کلیک را رها کند، رویداد onmouseup اتفاق می افتد.

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

این متد، همزمان دو تابع را برای پاسخ دادن به رویداد onmouseover و onmouseout یک عنصر، به آن اختصاص می دهد.

hover()

مثال :

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

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

این متد، یک تابع را برای پاسخ دادن به رویداد onfocus یک عنصر، به آن اختصاص می دهد.

focus()

مثال :

در کد زیر زمانی که علامت چشمک زن مکان نما روی یکی از اجزای فرم، مانند: Text Box قرار گیرد، رویداد onfocus اتفاق می افتد.

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

این متد، یک تابع را برای پاسخ دادن به رویداد onBlur یک عنصر، به آن اختصاص می دهد.

blur()

مثال :

در کد زیر زمانی که تمرکز از روی یکی از اجزای فرم خارج شود، رویداد onBlur اتفاق می افتد.

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

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

ممنون از اینکه با تیم وب یار همراه بودید وباز هم توصیه تیم وب یار به شما دوستان عزیز: سعی کنید با صرف زمان کافی و با تمرین رویدادهای جی کوئری که در این قسمت  از آموزش جی کوئری به آن پرداختیم با آنها و نحوه استفده هر کدام بیشتر آشنا شوید. شما میتوانید با مراجعه به کدهای  سایت های مختلف موجود در اینترنت و یا همین سایت وبیار (راست کلیک > view page source) با نحوه به کارگیری درست رویدادهای جی کوئری آشنا شوید.

برای انجام طراحی سایت های حرفه ای و بهینه سازی آن ها وب یار را به خاطر بسپارید.