Setelah pemroses peristiwa

Jeff Posnick

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

Jangan malu jika Anda berpikir bahwa addEventListener() hanya membutuhkan waktu dua parameter, atau mungkin selalu melakukan hardcode pada nilai false, dengan memahami bahwa ini ada hubungannya dengan... balon?

AddEventListener() yang lebih dapat dikonfigurasi

Metode addEventListener() telah berkembang pesat sejak awal web, dan fungsionalitas barunya dikonfigurasi melalui versi yang lebih canggih dari parameter ketiga. Perubahan terbaru pada definisi metode memungkinkan developer untuk menyediakan opsi tambahan melalui objek konfigurasi, namun tetap kompatibel dengan parameter boolean atau pilihan tidak ditentukan.

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

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

Anda dapat mencampur dan mencocokkan opsi tersebut sesuai dengan kasus penggunaan Anda sendiri.

Manfaat melakukan pembersihan

Itu adalah sintaksis untuk menggunakan opsi once baru, tetapi apa yang akan Anda? Singkatnya, ini memberi Anda pemroses peristiwa yang disesuaikan dengan "satu dan selesai" kasus penggunaan.

Secara default, pemroses peristiwa tetap ada setelah pertama kali dipanggil, yang yang Anda inginkan untuk beberapa jenis peristiwa—tombol yang bisa diklik waktu, misalnya. Namun, untuk penggunaan lain, menggunakan pemroses peristiwa tidak diperlukan, dan dapat menyebabkan perilaku yang tidak diinginkan jika Anda memiliki yang hanya boleh dieksekusi satu kali. Developer higienis selalu memiliki opsi penggunaan removeEventListener() untuk membersihkan berbagai hal 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 bersih, 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 dikaitkan dengan fungsi callback, yang memungkinkan variabel yang tercakup dalam cakupan tersebut akan dibersihkan. Berikut adalah salah satu contoh di mana 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 berada dalam cakupan saat callback selesai berjalan, meskipun tidak pernah digunakan lagi. Karena variabel data digunakan di dalam callback, callback juga akan tetap dalam cakupan, dan tidak pernah mendapatkan sampah kumpulkan. Namun, jika callback dihapus melalui parameter once, fungsi itu sendiri dan apa pun yang tetap hidup melalui ruang lingkupnya akan berpotensi menjadi kandidat untuk pembersihan sampah memori.

Dukungan browser

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

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

Terima kasih

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