ترفندهای پیشرفته jQuery (قسمت 15)

- visibility ١ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع سوم : رویدادها

ترفند 29 : کار کردن با رویدادهای لمسی

بعضی اوقات برای تعامل وبسایت با کاربران استفاده از رویدادهای لمسی نیاز هست. کار کردن با رویدادهای لمسی خیلی با رویدادهای مربوط به ماوس متفاوت نیست. رویداد کلیک و هاور برای موبایل هم شبیه سازی شده هست ، اما اگر شما به عملیات پیشرفته تری همانند پیدا کردن اشاره کاربران و درگ کردن نیاز دارید ، شما باید کار بیشتری رو انجام بدین. بعنوان مثال کد زیر رو در نظر بگیرید:

کدهای JS:

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

میبینید که در ابتدا تعدادی متغیر رو تعریف کردیم. یک div با id = ball ساختیم و در body قرار دادیم. بعد از اون هم دو آرایه رو قرار دادیم.

قرار دادن رویداد برای ماوس و touch:

همونطور که دیدین در ابتدا با استفاده از متد on برای mousedown و touchstart یک Event Handler قرار دادیم. بعد از اون با استفاده از متد preventDefault از رویداد پیش فرض جلوگیری کردیم و قصد داریم که خودمون براش تعریف کنیم.

در ابتدا باید رویداد لمسی رو بصورت نرمال قرار بدین.

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

بعد از اون هم زمانی که رویداد ماوس یا touch به پایان رسید ، رویدادهای سنگین رو پاک میکنیم تا حافظه سبک بشه:

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

ترفند 30 : با رویدادها آشنایی کامل داشته باشید

jQuery مدیریت رویدادها رو در نسخه 1.7 با استفاده از معرفی متدهای on و off ساده و آسان کرده. با استفاده از این متدها میتونین ترفندهای جالبی رو پیاده سازی کنید ، اما آیا شما با استفاده صحیح از این متدها آشنایی دارید؟

کدهای HTML:

کدهای JS:

در ابتدا المنتها رو در متغیرهایی میریزیم و اونارو ذخیره میکنیم:

مورد اول - مدیریت رویداد مستقیم:

با استفاده از کد ، زمانی که بر روی دکمه  کلیک شه ، یک متن در Console نمایش داده میشه.

مورد دوم - مدیریت تعدادی رویداد بصورت مستقیم:

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

مورد سوم - فرستادن اطلاعات و داده:

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

مورد چهارم - استفاده از رویداد همراه با namespace:

اگر در مورد فضای نام در jQuery خواستید بیشتر بدونید ، میتونید از این لینک استفاده کنید.

مورد پنجم - استفاده از event delegation:

مورد ششم - Passing an event map:

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

متد on متدهای bind ، live و delegate رو متحد و یکی کرده و میتونین بجای اونا از on استفاده کنید.

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

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران
MohamadHosein

سلام
من برای ترفند 29 کدهامو به این صورت نوشتم اما جواب نگرفتم :

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.