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

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

<button>Click Me</button>

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

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

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

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

کافیست تا آبجکت المنت را گرفته و سپس از متد 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 آن را فراخوانی کنیم.