Setelah pemroses peristiwa

Jeff Posnick

Kuis hiburan: apa tujuan parameter ketiga yang diteruskan ke addEventListener()?

Jangan malu jika Anda mengira bahwa addEventListener() hanya memerlukan dua parameter, atau mungkin hanya selalu melakukan hardcode pada nilai false, dengan pemahaman yang samar bahwa hal ini ada hubungannya dengan… balon?

addEventListener() yang lebih dapat dikonfigurasi

Metode addEventListener() telah berkembang pesat sejak awal web, dan fungsi barunya dikonfigurasi melalui versi parameter ketiga yang ditingkatkan. Perubahan terbaru pada definisi metode memungkinkan developer memberikan opsi tambahan melalui objek konfigurasi, sekaligus tetap kompatibel dengan versi sebelumnya jika ada parameter boolean atau jika opsi tidak ditentukan.

Dengan senang hati kami mengumumkan bahwa Chrome 55 menambahkan dukungan untuk opsi once dalam objek konfigurasi tersebut, bersama dengan opsi passive (diterapkan di Chrome 51) dan capture (diterapkan di Chrome 49). Contoh:

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

Anda dapat memadupadankan opsi tersebut sesuai dengan kasus penggunaan Anda sendiri.

Manfaat membersihkan setelah Anda selesai

Jadi, itulah sintaksis untuk menggunakan opsi once baru, tetapi apa yang Anda dapatkan darinya? Singkatnya, ini memberi Anda pemroses peristiwa yang disesuaikan dengan kasus penggunaan "satu kali selesai".

Secara default, pemroses peristiwa akan tetap ada setelah pertama kali dipanggil, yang adalah yang Anda inginkan untuk beberapa jenis peristiwa—misalnya, tombol yang dapat diklik beberapa kali. Namun, untuk penggunaan lain, pemroses peristiwa yang tetap ada tidak diperlukan, dan dapat menyebabkan perilaku yang tidak diinginkan jika Anda memiliki callback yang hanya boleh dieksekusi sekali. Developer yang higienis selalu memiliki opsi untuk menggunakan removeEventListener() untuk membersihkan semuanya secara eksplisit, dengan mengikuti pola seperti:

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

Kode yang setara, yang menggunakan parameter once baru, lebih rapi, dan tidak memaksa Anda untuk melacak nama peristiwa (event.type, dalam contoh sebelumnya) atau referensi ke fungsi callback (cb):

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

Membersihkan pengendali peristiwa juga dapat menawarkan efisiensi memori dengan menghancurkan cakupan yang terkait dengan fungsi callback, sehingga variabel apa pun yang diambil dalam cakupan tersebut dapat di-garbage collection. Berikut adalah salah satu contoh yang akan membuat perbedaan:

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

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

Secara default, callback pemroses peristiwa load akan tetap dalam cakupan saat selesai berjalan, meskipun tidak pernah digunakan lagi. Karena variabel data digunakan di dalam callback, variabel ini juga akan tetap dalam cakupan, dan tidak pernah dikumpulkan sampah. Namun, jika callback dihapus melalui parameter once, baik fungsi itu sendiri maupun apa pun yang tetap aktif melalui cakupannya akan berpotensi menjadi kandidat untuk pembersihan sampah memori.

Dukungan browser

Chrome 55+, Firefox 50+, dan pratinjau teknologi 7+ Safari memiliki dukungan native untuk opsi once.

Banyak library UI JavaScript menyediakan metode praktis untuk membuat pemroses peristiwa, dan beberapa memiliki pintasan untuk menentukan peristiwa satu kali—yang paling penting adalah metode one() jQuery. Polyfill juga tersedia, sebagai bagian dari library dom4 Andrea Giammarchi.

Terima kasih

Terima kasih kepada Ingvar Stepanyan atas masukan tentang kode contoh dalam postingan ini.