سبد (0)

تبلیغات

رویدادها در jQuery

jQuery برای پاسخ دادن به رویدادهایی که در یک صفحه HTML اتفاق می افتد، بهینه شده است.


رویداد (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>، می توانید مانند زیر عمل کنید:

$("p").click();

قدم بعدی، مشخص کردن کاری است که باید به ازای رویداد onclick اتفاق بیافتد. باید یک تابع را به عنوان پارامتر به متد click ارسال کنید:

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

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

$(document).ready()

این متد به شما اجازه می دهد تا یک تابع را زمانی که صفحه کاملاً بارگذاری شد، اجرا کنید. این رویداد قبلاً در مطلب jQuery Syntax توضیح داده شده است.

click()

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

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

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

مثال (رویدادها در jQuery)

$("p").click(function(){
  $(this).hide();
});
خودتان امتحان کنید »

dblclick()

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

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

مثال (رویدادها در jQuery)

$("p").dblclick(function(){
  $(this).hide();
});
خودتان امتحان کنید »

mouseenter()

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

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

مثال (رویدادها در jQuery)

$("#p1").mouseenter(function(){
  alert("You entered p1!");
});
خودتان امتحان کنید »

mouseleave()

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

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

مثال (رویدادها در jQuery)

$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
خودتان امتحان کنید »

mousedown()

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

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

مثال (رویدادها در jQuery)

$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});
خودتان امتحان کنید »

mouseup()

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

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

مثال (رویدادها در jQuery)

$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});
خودتان امتحان کنید »

hover()

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

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

مثال (رویدادها در jQuery)

$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});
خودتان امتحان کنید »

focus()

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

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

مثال (رویدادها در jQuery)

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
خودتان امتحان کنید »

blur()

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

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

مثال (رویدادها در jQuery)

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
خودتان امتحان کنید »

jQuery Event Methods

For a full jQuery event reference, please go to our jQuery Events Reference.

دیدگاه‌ها  

0 # ali2 1396-01-25 20:23
سلام خسته نباشید من یه کد اسلایدر با جی کویری نوشتم الان میخوام یه اسلاید سلکتور نقطه ای برای اسلایدر بذارم و همینطور اینکه وقتی موس روی اسلایدر رفت متوقف بشه ..لطفا کمک ام کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # ایمان کریمی 1396-04-13 09:54
سلام دوست من، اصلا با جی کوئری کار میکنیم که کدامون کمتر و مختصر تر بشن، دلیلی نداره بخوای خودت بشینی اسلایدر کد بزنی، از پلاگین جیگوئری استفاده کن، یه اسلایدر اماده مثل owlcarusle یا slicse خیلی راحته کار ابهاشون، داکیومنتشونو بخونی تو پنج دقیقه اسلایدرتو انداختی، و برای کاستومایز کردنشم راحتی هر کار خواستی میتونی کنی باهاشون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # rasoul miri 1395-09-08 12:06
آموزش خوبی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # mona kia 1395-09-03 10:24
سلام..ممنون از سایت خیلی خوبتون ... آموزش رویدادها در jQuery عالی بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # beh naz 1395-01-26 20:50
با سلام
برای رویداد mousedown نوشتین که در صورت کلیک چپ پیغامی را نشان میدهد در صورتی که برای راست کلیک هم همان پیغام را نشان میدهد.
علتش چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-01-29 09:40
با سلام و تشکر
رویدادهایی که با ماوس سر و کار دارن، در حالت عادی برای کلیک چپ هستند. این رویدادها در صورت نیاز آرگومانی دارن که از اون میشه برای تشخیص کلیک راست و چپ و حتی middle هم استفاده کرد. با جستجو در گوگل میتونید نمونه مثالهای جالبی پیدا کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # علی صادقی 1394-12-26 18:31
خیلی ممنون از آموزش مفیدتون؛ واقعن استفاده بردم. تا اینجا که بهترین منبع آموزش بودین برام؛ ان‌شاالله که ادامه پیدا کنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # الیاس تیموری 1394-09-18 09:27
با سلام
مطالب آموزش جی کوئری بسیار عالی و آموزنده بود از زحمات شما متشکرم
در پناه خدا باشید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amin 1394-08-06 14:54
رویداد cycle چی کار می کنه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-06 15:01
تا جایی که میدونم چنین رویدادی نداریم.
کد رو بذارید تا ببینم مشکل از کجاست؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # amin 1394-08-06 15:37
ببخشید این مال اسلاید بود نه رویداد حواسم نبود فکر کردم رویداده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-06 16:01
I don't see any code.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # رامین 1394-07-18 11:31
واقعا سايت خوبي داريد

منوي ساختم که وقتي موس از روش جدا ميشه خيلي زود بسته مي شه مي خام کاري کنم که بعد از کنار رفتن موس يک مکس کوتاه يا همان يک ثانيه نمايش داده بشه و بعد آني بسته شه
که بيشتر براي گوشي هاي تلفن همراه کاربرد داره

ممنون میشم اگه کدش رو کامل برای من بنویسید من مبتدی هستم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-07-18 11:51
با سلام و تشکر.
لطفا کدی که نوشتید رو بذارید تا بشه دقیق راهنمایی کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Amin209m 1394-06-24 00:03
سلام
چه جوری میشه با استفاده از جی کوری یک text اگه خالی بود یک پیغامی رو به ما نمایش دهد که فیلد حتما باید پر باشد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-06-27 23:13
با سلام
فرض کنید که به text مورد نظر یک id با نام textID دارد. حال باید در رویداد کلیک این کد رو بنویسید البته این یک مثال ساده برای این کار است:
if(jQuery("#tex tID").val() == ""){alert("this field is empty.");}
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # amirkian 1394-05-23 13:34
سلام
به یک رویدادی نیاز دارم که عنصر ایفریمم ارتفاع عناصر درونش را بگیرد
میدانید که خود عنصر ایفریم فرزندی ندارد بلکه وقتی که صفحه ای را درون آن باز میکنیم محتویاتی میگیرد.
میخام ارتفاع ایفریمم برابر ارتفاع محتویاتی باشد که میگرید
آیا شدنی هست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # شهربانو دوستی 1394-05-28 20:54
0 رای
سایت مایکروسافت در پاسخ به سوال کاربرانش درباره موضوع فوق، کدی را در آدرس support.microso ft.com/kb/27846 9 قرار داده است.
نکته 1: با توجه به اینکه کد بالا توسط مایروسافت ارائه شده، برای IE کار می‌کند اما برای براوزرهای دیگر لزوما کار نمی‌کند که برای حل این مشل می‌توانید بجای جاوااسکریپت از jQuery استفاده کنید که تا حد زیادی cross browser عمل می‌کند. در لینک‌های زیر نمونه کدهایی وجود دارد:
benalman.com/code/projects/jquery-resize/examples/resize/
css-tricks.com/snippets/jquery/fit-iframe-to-content/
sonspring.com/journal/jquery-iframe-sizing/
نکته 2: من حدسم این است که iFrame شما دارای عرضی مشخص (مثلا محدود به ستون کناری سایت شما) است و فقط دوست دارید ارتفاعش را به اندازه مناسب تعیین کنید. که در این صورت (فقط تنظیم خودکار ارتفاع) لازم است کمی در کد بالا تغییر ایجاد کنید. کدهایی هم که برنامه‌نویسان در وب پیشنهاد داده‌اند همگی در مورد تغییر اتوماتیک ارتفاع بوده چرا که تغییر اتوماتیک عرض (width) بنظر ممکن نمی‌رسد (چون بسته به محتوای تصویری و جدولی و همچنین ارتفاع محتوا، عرض میتواند متغیر باشد) به همین خاطر معمولا width را حسب مکانش (مثلا ستون کناری یا فوتر) فیکس می‌کنند تا ارتفاع بتواند محاسبه شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # سارا 1394-01-31 09:48
سلام ممنون از سایت خوبتون
خواستم بدونم چرا در قسمت رویداد onmouseleave در قسمت توضیح اش نوشته اید که اگر onmouseout اجرا شود و مورد مشابه آن نیز در رویداد onmouseenter نوشته اید اگر onmouseover اجرا شود
ایراد تایپی است یا دلیل خاصی دارد؟ممنون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-01-31 13:42
سلام خیر ایراد تایپی وجود ندارد ...!
onmouseleave = onmouseout
این رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را از روی یک عنصر یا فرزندان آن عنصر بیرون ببرد.
onmouseenter = onmouseover
این رویداد، زمانی روی می دهد که، کاربر اشاره گر ماوس را بر روی یک عنصر یا فرزندان آن عنصر وارد کند.

برای کسب اطلاعات بیشتر در مورد کلیه رویدادهای JavaScript به لینک زیر مراجعه فرمایید:
www.beyamooz.com/jsref/344-html-dom/2630-dom-events
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # Ghost 1393-11-06 14:14
سلام , لطفا آموزش jQuey رو ادامه بدید . ممنون بابت آموزشات عالیتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی