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

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

<button>Click Me</button>

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

<button onclick="alert('Welcome to FuLLKade.COM');">Click Me</button>

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

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

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

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

<button id="btn">Click Me</button>

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

document.getElementById("btn").addEventListener("click", function () {
    alert('Welcome to FuLLKade.COM');
});

// ---------------------------------------------
// به صورت زیر نیز میتوان نوشت

document.getElementById("btn").addEventListener("click", test);

function test() {
    alert('Welcome to FuLLKade.COM')
}

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

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

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

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

document.getElementById("btn").addEventListener("click", function () {
    alert('Welcome to FuLLKade.COM');
}); 
document.getElementById("btn").addEventListener("click", function () {
    alert('Bye! Bye!');
});

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

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

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

document.getElementById("btn").addEventListener("click", function (event) {
    alert('Welcome to FuLLKade.COM');
    event.stopImmediatePropagation();
}); 
document.getElementById("btn").addEventListener("click", function () {
    alert('How are you?!');
});

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

پاسخ دهید

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

cp-codfk

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

    1. اکبر کاربر مهمان گفت:

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

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

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

توضیحات پیشنهادی نظرات اشتراک