روزی یک شنونده رویداد

Jeff Posnick

مسابقه پاپ: هدف سومین پارامتر ارسال شده به addEventListener() چیست؟

خجالت نکشید اگر فکر می کنید که addEventListener() فقط دو پارامتر گرفته است، یا شاید همیشه مقدار false را با درک مبهمی که ربطی به… حباب دارد، کد سختی دارد؟

یک addEventListener قابل تنظیم تر ()

متد addEventListener() از روزهای اولیه وب راه طولانی را پیموده است و عملکرد جدید آن از طریق نسخه سوپرشارژ شده آن پارامتر سوم پیکربندی شده است. تغییرات اخیر در تعریف روش به توسعه‌دهندگان اجازه می‌دهد تا گزینه‌های اضافی را از طریق یک شی پیکربندی ارائه کنند، در حالی که زمانی که یک پارامتر بولی وجود دارد یا زمانی که گزینه‌ای مشخص نشده است، سازگار باقی می‌مانند.

ما خوشحالیم که اعلام کنیم Chrome 55 در کنار گزینه‌های passive ( که در Chrome 51 پیاده‌سازی شده است ) و گزینه‌های capture ( اجرا شده در Chrome 49 ) از گزینه‌ی once در آن شیء پیکربندی پشتیبانی می‌کند. به عنوان مثال:

element.addEventListener('click', myClickHandler, {
    once: true,
    passive: true,
    capture: true
});

می‌توانید آن گزینه‌ها را مطابق با مورد استفاده خود ترکیب و مطابقت دهید.

مزایای تمیز کردن پس از خود

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

به‌طور پیش‌فرض، شنوندگان رویداد پس از اولین باری که با آن‌ها تماس گرفته می‌شوند، باقی می‌مانند، این همان چیزی است که شما برای برخی از انواع رویدادها می‌خواهید—دکمه‌هایی که می‌توانید برای مثال چندین بار کلیک کنید. با این حال، برای کاربردهای دیگر، داشتن یک شنونده رویداد در اطراف ضروری نیست، و در صورت داشتن یک تماس پاسخ که فقط یک بار باید اجرا شود، می‌تواند منجر به رفتار نامطلوب شود. توسعه دهندگان بهداشتی همیشه این گزینه را داشته اند که از removeEventListener() برای تمیز کردن واضح چیزها استفاده کنند، الگوهای زیر مانند:

element.addEventListener('click', function cb(event) {
    // ...one-time handling of the click event...
    event.currentTarget.removeEventListener(event.type, cb);
});

کد معادل، با استفاده از پارامتر جدید once ، پاک‌تر است و شما را مجبور نمی‌کند نام رویداد ( event.type ، در مثال قبلی) یا ارجاع به تابع برگشت تماس ( cb ) را پیگیری کنید. :

element.addEventListener('click', function(event) {
    // ...one-time handling of the click event...
}, {once: true});

تمیز کردن کنترل‌کننده‌های رویداد شما همچنین می‌تواند با از بین بردن محدوده مرتبط با عملکرد برگشت تماس، کارایی حافظه را به ارمغان بیاورد و به هر متغیری که در آن محدوده ثبت شده است اجازه می‌دهد زباله جمع‌آوری شود. در اینجا یک مثال از این قبیل است که در آن تفاوت ایجاد می کند:

function setUpListeners() {
    var data = ['one', 'two', '...etc.'];

    window.addEventListener('load', function() {
    doSomethingWithSomeData(data);
    // data is now part of the callback's scope.
    });
}

به‌طور پیش‌فرض، پاسخ تماس شنونده رویداد load پس از پایان اجرا، در محدوده باقی می‌ماند، حتی اگر دیگر هرگز استفاده نشود. از آنجایی که متغیر data در داخل callback استفاده می شود، در محدوده باقی می ماند و هرگز زباله جمع آوری نمی شود. با این حال، اگر پاسخ تماس از طریق پارامتر once حذف شود، هم خود تابع و هم هر چیزی که از طریق محدوده آن زنده نگه داشته می شود، به طور بالقوه کاندیدای جمع آوری زباله خواهند بود.

پشتیبانی از مرورگر

Chrome 55+، Firefox 50+ و پیش‌نمایش فناوری Safari 7+ از گزینه once پشتیبانی بومی دارند.

بسیاری از کتابخانه‌های جاوا اسکریپت UI روش‌های راحتی را برای ایجاد شنوندگان رویداد ارائه می‌کنند، و برخی نیز میانبرهایی برای تعریف رویدادهای یک‌باره دارند که قابل‌توجه‌ترین آنها متد one() jQuery است. پلی فیل نیز به عنوان بخشی از کتابخانه dom4 Andrea Giammarchi در دسترس است.

با تشکر

با تشکر از Ingvar Stepanyan برای بازخورد در مورد کد نمونه در این پست.