تبلیغات

مشخص کردن رویداد المنت ها از داخل کد جاوا اسکریپت

فرض کنید المنتی به صورت زیر در فایل HTML تعریف شده است:

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

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

اما مواقعی پیش می‌آید که بخواهیم رویدادهای این المنت‌ها را از داخل کد جاوا اسکریپت تعریف کنیم! یعنی برای مثال، در بالا onclick را ننوشته باشیم و در کد جاوا اسکریپت مشخص کنیم که اگر روی المنت مورد نظرمان کلیک شد، چه اتفاقی رخ دهد!

روش انجام این کار

کافیست تا آبجکت المنت را گرفته و سپس از متد addEventListener برای تعریف رویداد استفاده کنیم! پس فرض کنید برای المنت قبلی، یک آیدی اختصاص داده‌ایم:

سپس در کد جاوا اسکریپت خواهیم داشت:

ورودی‌های متد addEventListener:

  • ورودی اول: نام رویداد بدون عبارت on که در ابتدایش قرار دارد!
  • ورودی دوم: کاری که رویداد قرار است انجام دهد که به صورت یک تابع خواهد بود.

افزودن رویداد تکراری

می‌توان چندین بار بری یک رویداد تکراری از یک المنت، تابع جدیدی را تعریف کرد که اجرا شود! و همه‌ی آنها پس از اتفاق افتادن آن رویداد مورد نظر، به ترتیب زمان اضافه شدنشان اجرا خواهند شد:

حالا ابتدا Welcome to FuLLKade.COM نمایش داده شده و سپس Bye! Bye! نمایش داده می‌شود!

جلوگیری از اجرای بقیه رویدادها

اما برای اینکه جلوی اجرای بقیه‌ی رویدادهای اضافه شده از زمان فعلی به بعد را بگیریم، می‌توان به صورت زیر عمل کرد:

همانطور که می‌بینید، فقط کافیست تا آبجکت event را داخل تابع دریافت کرده و سپس متد stopImmediatePropagation آن را فراخوانی کنیم.

تبلیغات
2 نظر
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده 2 دیدگاه

    1. اکبر گفت:

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

      1. هادی اکبرزاده گفت:

        سلام. متاسفانه از سیستم وبلاگ دهی ای که استفاده میکنین اطلاعی نداریم.
        هدف شما جلوگیری از کپی شدن متنه؟!