ممکنه شما نیاز به jQuery نداشته باشید (قسمت 17)

- visibility ٠ mode_comment

در این مطلب با ادامه مطالب مربوط با کدهای جایگزین برای jQuery در خدمتتون هستم و امیدوارم که بدردتون بخوره. Javascript-vs-jquery

موضوع 4 : کار کردن با رویدادها

مورد 1 : استفاده از متد off

اگر بخوایم در jQuery از متد off استفاده کنیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد off میتونیم این مورد رو انجام بدیم. ابن متد دو ورودی دریافت میکنه که اولین اونا نام رویداد مورد نظر و دومی تابعی هست که قصد داریم روی اون مانور بدیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

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

برای IE9 به بالا:

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

مورد 2 : استفاده از متد on

اگر بخوایم در jQuery از متد on استفاده کنیم، بصورت زیر عمل میکنیم:

میبینید که در ابتدا el مورد نظر رو انتخاب کردیم و با استفاده از متد on میتونیم این مورد رو انجام بدیم. ابن متد دو ورودی دریافت میکنه که اولین اونا نام رویداد مورد نظر و دومی تابعی هست که قصد داریم روی اون مانور بدیم.

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

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

برای IE9 به بالا:

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

مورد 3 : شبیه سازی Ready

اگر بخوایم در jQuery متد Ready رو شبیه سازی کنید، بصورت زیر عمل میکنیم:

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

حالا همین کار رو اگر بخواید با Javascript خالص انجام بدین بصورت زیر خواهد بود:

برای IE8 به بالا:

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

برای IE9 به بالا:

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

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

موفق و سربلند باشید.

یا علی

Source

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

نیاز به لاگین

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