Setelah pemroses peristiwa

Joni Setiawan

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

Jangan malu jika Anda berpikir bahwa addEventListener() hanya menggunakan dua parameter, atau mungkin hanya selalu melakukan hardcode nilai false, dengan pemahaman yang samar-samar bahwa nilai tersebut ada hubungannya dengan... balon?

AddEventListener() yang lebih mudah dikonfigurasi

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

Dengan senang hati kami umumkan bahwa Chrome 55 menambahkan dukungan untuk opsi once di objek konfigurasi tersebut, beserta 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 melakukan pembersihan setelah diri sendiri

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

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

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, pada 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 memungkinkan setiap variabel yang diambil dalam cakupan tersebut dibersihkan sampah memorinya. 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 berada dalam cakupan saat selesai berjalan, meskipun tidak pernah digunakan lagi. Karena digunakan di dalam callback, variabel data juga akan tetap berada dalam cakupan, dan tidak akan pernah dibersihkan sebagai sampah memori. Namun, jika callback dihapus melalui parameter once, fungsi itu sendiri dan apa pun yang tetap aktif melalui cakupannya 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 library 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.