متدهای رویداد

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

jQuery یک پاسخ خاص به رویدادها در یک صفحه HTML است.[۱]

رویداد (به انگلیسی: Event) چیست؟

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

یک رویداد نشان دهنده لحظه‌ای دقیق است که اتفاقی می‌افتد.

مثال‌ها:

  • حرکت دادن ماوس بر روی یک عنصر
  • انتخاب یک radio button
  • کلیک بر روی یک عنصر

عبارت “fires/fired” اغلب با رویدادها استفاده می‌شود. مثال: «لحظه‌ای که کلید را فشار دهید، رویداد keypress, fire می‌شود».

در اینجا برخی از رویدادهای رایج DOM آمده‌است:

رویدادهای ماوس رویدادهای صفحه کلید رویدادهای فرم رویدادهای ویندوز/سند
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

نحو jQuery برای متدهای رویداد

در jQuery، اکثر رویدادهای DOM یک متد معادل در jQuery دارند.

برای تخصیص یک رویداد کلیک به همه پاراگراف‌های داخل صفحه، می‌توانید این کار را انجام دهید:

$("p").click();

مرحله بعدی تعیین این مسئله است که پس از fire شدن رویداد چه اتفاقی باید بیفتد. شما باید یک تابع را به رویداد ارسال دهید:

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


متدهای رویداد رایج در jQuery

$(document).ready()

متد $(document).ready() به ما امکان اجرای یک تابع را هنگامی که سند کاملاً بارگذاری شد می‌دهد. این رویداد قبلاً در بخش نحو jQuery توضیح داده شده‌است.

click()

متد click() یک تابع event handler (به فارسی: مدیر رویداد) را به یک عنصر HTML ضمیمه می‌کند.

این تابع هنگامی اجرا می‌شود که کاربر بر روی عنصر HTML کلیک کند.

مثال‌های زیر می‌گویند: هنگامی که یک رویداد کلیک بر روی عنصر <p> می‌شود؛ عنصر <p> جاری پنهان می‌شود:

مثال
1 $("p").click(function(){
2   $(this).hide();
3 });

dblclick()

متد dblclick() یک تابع event handler (به فارسی: مدیر رویداد) را به یک عنصر HTML ضمیمه می‌کند. این تابع هنگامی اجرا می‌شود که کاربر بر روی عنصر HTML دابل کلیک کند:

مثال
1 $("p").dblclick(function(){
2   $(this).hide();
3 });

mouseenter()

متد mouseenter() یک تابع event handler را به یک عنصر HTML ضمیمه می‌کند. این تابع هنگامی اجرا می‌شود که اشاره‌گر ماوس وارد یک عنصر HTML شود:

مثال
1 $("#p1").mouseenter(function(){
2   alert("You entered p1!");
3 });

متد mouseleave() یک event handler را به یک عنصر HTML ضمیمه می‌کند.

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

مثال
1 $("#p1").mouseleave(function(){
2   alert("Bye! You now leave p1!");
3 });

mousedown()

متد mousedown() یک تابع event handler (به فارسی: مدیر رویداد) را به یک عنصر HTML ضمیمه می‌کند. این تابع زمانی اجرا می‌شود که در حالی‌که اشاره‌گر ماوس بر روی عنصر است، کلید راست، وسط یا چپ ماوس فشار داده شود:

مثال
1 $("#p1").mousedown(function(){
2   alert("Mouse down over p1!");
3 });

mouseup()

متد mouseup() یک تابع event handler را به یک عنصر HTML ضمیمه می‌کند. این تابع زمانی اجرا می‌شود که در حالی‌که اشاره‌گر ماوس بر روی عنصر است، کلید راست، وسط یا چپ ماوس رها شود:

مثال
1 $("#p1").mouseup(function(){
2   alert("Mouse up over p1!");
3 });

hover()

متد hover() دو تابع دارد و ترکیبی از متدهای mouseenter() و mouseleave() است. این تابع زمانی اجرا می‌شود که ماوس وارد عنصر HTML شود و تابع دوم زمانی اجرا می‌شود که ماوس از روی عنصر HTML خارج می‌شود:

مثال
1 $("#p1").hover(function(){
2   alert("You entered p1!");
3 },
4 function(){
5   alert("Bye! You now leave p1!");
6 });

focus()

متد focus() یک تابع event handler (مدیر رویداد) را به یک فیلد فرم HTML ضمیمه می‌کند. این تابع زمانی اجرا می‌شود که فیلد فرم focus شود (cursur روی آن قرار بگیرد):

مثال
1 $("input").focus(function(){
2   $(this).css("background-color", "#cccccc");
3 });

blur()

متد blur() یک تابع event handler را به یک فیلد فرم HTML ضمیمه می‌کند. این تابع هنگامی اجرا می‌شود که Focus از روی فیلد فرم برود:

مثال
1 $("input").blur(function(){
2   $(this).css("background-color", "#ffffff");
3 });

متد on()

متد on() یک یا چند تابع event handler (به فارسی: مدیر رویداد) را به یک عنصر انتخاب شده ضمیمه می‌کند.

یک رویداد کلیک را به عنصر <p> ضمیمه می‌کند:

مثال
1 $("p").on("click", function(){
2   $(this).hide();
3 });

تعدادی event handler را به یک عنصر <p> ضمیمه می‌کند:

مثال
 1 $("p").on({
 2   mouseenter: function(){
 3     $(this).css("background-color", "lightgray");
 4   },
 5   mouseleave: function(){
 6     $(this).css("background-color", "lightblue");
 7   },
 8   click: function(){
 9     $(this).css("background-color", "yellow");
10   }
11 });

تمرین‌های jQuery

متدهای رویداد jQuery

برای دستیابی به مرجع کامل jQuery، لطفاً به مرجع رویدادهای jQuery مراجعه کنید.


منابع آموزشی