تبلیغات

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

پاسخ دهید

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

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