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.