آموزش JQuery (قسمت ۱۱)

آموزش-jquery-قسمت-۱۱

در JQuery انواع رویدادهایی (Events) وجود دارند که عملکرد هر کدام متفاوت از بقیه می باشد.در قسمت دوم از آموزش JQuery با نحوه استفاده از رویداد ها آشنا شدید و حالا میریم سراغ انواع رویدادها و عملکرد هر کدام از آن ها. در جدول زیر لیستی از رویدادهای JQuery و نیز عملکرد آن ها رو براتون نوشتم.

نام رویداد عملکرد
click زمانی که رویداد کلیک رخ می دهد
dblclick زمانی که رویداد دابل کلیک رخ می دهد
mouseenter زمانی که نشانگر ماوس در محدودده ای که این رویداد برای آن تعریف شده وارد می شود
mouseleave زمانی که نشانگر ماوس از محدوده ای که این رویداد برای آن تعریف شده است خارج می شود
mousedown زمانی که هرکدام از دکمه های ماوس فشار داده شود این رویداد رخ می دهد
mouseup زمانی که هرکدام از دکمه های ماوس فشار داده شده و رها می شود (توجه داشته باشید که این رویداد در هنگام رها کردن دکمه رخ می دهد ولی رویداد mousedown هنگام فشردن دکمه رخ می دهد)
hover این رویداد زمانی که نشانگر ماوس بر روی محدوده مورد نظر حرکت کند رخ می دهد
focus این رویداد زمانی که یک شی فعال می باشد رخ می دهد مثلا هنگامی که اشاره گر کیبورد  بر روی ابزار نوشتاری فعال باشد رویداد focus بر روی آن ابزار اعمال شده است
blur این رویداد دقیقا برعکس رویداد focus عمل می کند

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

روش اول :

$('#box1').click(function(){
   // کد
});

روش دوم :

$('#box1').on('click', function(){
  // کد 
});

شما به ۲ روش بالا می توانید از رویدادهای JQuery استفاده کنید ولی تفاوت آن ها چیست؟

در روش اول ما می توانید تنها از ۱ رویداد استفاده کنیم و برای نوشتن رویداد دیگر برای box1 باید دوباره همان کد هار تکرار کنیم ولی در روش دوم ما می توانیم در همان کد چندین رویداد تعریف کنیم که برای هر رویداد کدهای خودش را بنویسید.در تکه کد زیر می توانید نحوه استفاده از چند رویداد را ببینید.

$('#box1').on({
  click: function(){
    // کد 
  },
  mouseenter: function(){
    // کد
  }
});

در تکه کد بالا ما برای box1 دو رویداد click و mouseenter تعریف کردیم که در بخش کد هر رویداد می توانید کدهای مربوط به اون رویداد رو بنویسید.


► قسمت قبلی
خودتان امتحان کنید

آموزش های مرتبط :



نظرات کاربران

نظر شما؟