Apa Itu Pendengar Peristiwa?
Pendengar peristiwa adalah fungsi dalam JavaScript yang menunggu peristiwa terjadi lalu meresponsnya. JavaScript adalah bahasa pemrograman yang digunakan developer untuk membuat halaman web yang interaktif. Fungsi pendengar peristiwa JavaScript memungkinkan Anda untuk membuat respons kustom pada peristiwa seperti klik mouse, klik keyboard, dan pengubahan ukuran jendela. Paradigma pemrograman menunggu dan merespons peristiwa waktu nyata disebut penanganan peristiwa.
Apa sintaksis dari fungsi pendengar peristiwa?
Fungsi pendengar peristiwa memiliki karakteristik yang mirip dengan fungsi JavaScript lainnya. Ketika diaktifkan, fungsi ini membutuhkan tindakan yang diperlukan untuk memproses peristiwa. Misalnya, fungsi pendengar peristiwa dapat mengubah teks yang ditampilkan, mengumpulkan informasi dari formulir pendaftaran, atau menyimpan data dalam basis data.
Sintaksis pendengar peristiwa
Fungsi peristiwa pendengar mengikuti sintaksis JavaScript yang tepat, seperti dalam contoh berikut ini.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
Contoh ini menunjukkan fungsi pendengar peristiwa RespondMouseClick. Menulis nama fungsi untuk mencerminkan tujuan pendengar peristiwa adalah hal yang umum dilakukan. Di dalam fungsi, Anda menulis kode untuk melakukan tindakan tertentu ketika peristiwa terjadi. Dalam contoh ini, fungsi menambahkan teks MouseClick yang terjadi ke elemen HTML textdisplay1.
Sintaksis handler peristiwa
Atau, Anda dapat menggunakan fungsi handler peristiwa untuk merespons peristiwa yang diaktifkan, seperti dalam contoh berikut.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Dengan cara ini, Anda dapat mengelola beberapa tipe peristiwa dari elemen tertentu dengan satu fungsi.
Misalnya, Anda dapat mendaftarkan pendengar peristiwa untuk menangani semua jenis peristiwa rantai blok pada aplikasi berbasis peristiwa. Untuk informasi selengkapnya, baca tentang membangun aplikasi berbasis acara dengan Amazon Managed Blockchain.
Bagaimana cara menambahkan pendengar peristiwa?
Pendengar peristiwa hanya akan diaktifkan setelah Anda menambahkannya ke elemen JavaScript masing-masing. Untuk melakukannya, Anda dapat menggunakan sintaksis seperti ini:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Misalnya, developer dapat memanggil fungsi berikut untuk mengikat pendengar peristiwa klik ke elemen tombol.
btn.addEventListener("click", RespondMouseClick);
Anda juga dapat menambahkan beberapa pendengar peristiwa ke objek peristiwa tertentu tanpa menimpa handler peristiwa yang ada.
Misalnya, Amazon Web Services (AWS) memungkinkan developer untuk merangkaikan beberapa panggilan balik pada objek AWS.Request. Untuk informasi selengkapnya, baca cara menggunakan pendengar peristiwa objek permintaan di AWS.
Parameter untuk menambahkan peristiwa
Berikut adalah penjelasan tentang parameter dalam sintaksis sebelumnya:
- Parameter peristiwa adalah setiap peristiwa JavaScript yang valid, seperti klik, perubahan, pengarahan mouse, penekanan tombol, dan pemuatan.
- Parameter pendengar adalah peristiwa pemanggilan kembali atau fungsi JavaScript yang dibuat untuk merespons peristiwa tertentu.
- Parameter useCapture adalah parameter opsional yang menunjukkan mode propagasi peristiwa. Parameter ini menerima nilai Boolean, di mana true mengaktifkan capturing, sedangkan false mengaktifkan bubbling. Nilai default parameter ini diatur ke false.
- Parameter opsi terdiri dari beberapa nilai opsional, termasuk mode capture dan sinyal penolakan, yang merepresentasikan perilaku pendengar.
Bagaimana cara menghapus pendengar peristiwa?
Pendengar peristiwa tetap aktif sampai Anda menghapusnya dari elemen JavaScript terkait. Anda dapat menggunakan sintaksis berikut untuk melakukannya.
element.removeEventListener(type, listener, useCapture);
Parameter penghapusan pendengar peristiwa serupa dengan yang Anda gunakan untuk menambahkan pendengar peristiwa. Saat Anda menghapus pendengar peristiwa, Anda harus menentukan parameter tipe, pendengar, dan useCapture yang sama. Jika tidak, pendengar peristiwa akan tetap aktif dan terus memicu peristiwa mendatang.
Misalnya, Anda dapat menambahkan peristiwa dengan kode berikut.
button.addEventListener("click", RespondMouseClick, true);
Namun, jika Anda menerapkan kode berikut, penghapusan pendengar peristiwa akan gagal. Itu karena nilai useCapture berbeda dari nilai yang terdaftar dengan objek tombol.
button.removeEventListener("click", RespondMouseClick, false);
Agar berhasil menghapus peristiwa dan mencegahnya terpicu, Anda dapat menggunakan kode berikut.
button.removeEventListener("click", RespondMouseClick, true);
Bagaimana cara kerja fungsi pendengar peristiwa bersarang?
Pendengar peristiwa bersarang adalah handler peristiwa yang ditambahkan ke elemen HTML pada lapisan hierarki yang berbeda.
Dalam contoh HTML berikut, dokumen memiliki elemen induk dasar, sedangkan induk memiliki anak.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Aplikasi web yang kompleks mungkin memiliki beberapa lapisan induk-anak dengan fungsi pendengar peristiwa masing-masing. Ketika peristiwa tertentu terjadi, pendengar peristiwa terpicu pada lapisan yang berbeda dalam urutan tertentu. Misalnya, mengeklik tombol anak akan menyebarkan peristiwa ke semua handler yang menangkap klik mouse.
Peristiwa dapat menyebar dalam dua mode—bubbling dan capturing.
Bubbling peristiwa
Bubbling merupakan mode default penanganan peristiwa JavaScript. Mode ini menyebarkan peristiwa dari lapisan terdalam ke lapisan terluar.
Misalnya, pengguna dapat mengarahkan kursor pada kotak teks di bagian anak. Kemudian, aplikasi dapat meneruskan peristiwa dengan urutan sebagai berikut:
- Pendengar peristiwa pada anak menangani pengarahan mouse.
- Kemudian, pendengar peristiwa induk memproses peristiwa tersebut dan meneruskan kontrol ke pendengar peristiwa dokumen.
Untuk menyiapkan bubbling peristiwa, gunakan sintaksis berikut:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Penangkapan peristiwa
Capturing peristiwa adalah mode penanganan peristiwa khusus dalam JavaScript di mana peristiwa menyebar masuk dari lapisan terluar. Setelah peristiwa mencapai elemen target di lapisan dalam, mode penanganan peristiwa berubah menjadi bubbling. Kemudian, bubbling menyebarkan peristiwa keluar ke lapisan paling atas.
Misalnya, pengguna dapat mengeklik tombol anak dan memulai urutan berikut:
- Dokumen pendengar peristiwa memproses peristiwa klik mouse, diikuti oleh handler peristiwa induk.
- Peristiwa ini mencapai elemen target, yakni tombol. Pendengar peristiwa tombol akan memproses peristiwa.
- Penanganan peristiwa beralih dari mode capturing ke mode bubbling.
- Peristiwa klik mouse yang sama akan melepaskan handler peristiwa di induk sebelum berakhir pada dokumen.
Cara memilih antara bubbling dan capturing
Bubbling dan capturing memungkinkan Anda untuk menangani peristiwa secara berbeda. Bubbling jarang digunakan karena capturing sudah cukup untuk menangani sebagian besar peristiwa dalam aplikasi.
Ketika Anda memutuskan antara bubbling dan capturing, Anda harus mempertimbangkan aliran penyebaran peristiwa dan bagaimana aliran tersebut selaras dengan logika pemrograman aplikasi Anda.
Misalnya, pertimbangkan bentuk induk yang terdiri dari dua elemen anak. Elemen pertama membutuhkan pembaruan langsung ketika suatu peristiwa terjadi pada elemen kedua. Dalam hal ini, Anda harus menggunakan mode capturing. Mode ini memastikan pendengar peristiwa induk memproses peristiwa dan memperbarui elemen pertama. Kemudian, kontrol akan diteruskan ke pendengar peristiwa pada elemen anak kedua.
Bagaimana cara menghentikan penyebaran peristiwa dalam fungsi pendengar peristiwa bersarang?
Peristiwa akan menyebar hingga mencapai tujuan akhir dalam pendengar yang disusun bersarang. Anda harus menggunakan metode khusus untuk mencegah peristiwa menyebar lebih lanjut.
Metode berikut menghentikan peristiwa pada pendengar peristiwa.
event.stopPropagation();
Misalnya, jika Anda memanggil StopPropagation di tombol anak, peristiwa klik mouse tidak akan menyebar ke tingkat induk dan dokumen. Oleh karena itu, pendengar peristiwa di tingkat yang lebih tinggi tidak akan terpicu.
Hentikan semua penyebaran peristiwa
StopPropagation hanya menghentikan penyebaran tipe peristiwa terkini. Jika objek memiliki berbagai jenis pendengar peristiwa yang terdaftar, pendengar tersebut masih akan terpicu meskipun ada panggilan StopPropagation.
Untuk menghentikan semua peristiwa yang terkait dengan objek tertentu, Anda dapat menggunakan metode StopImmediatePropagation, sebagai berikut.
event.stopImmediatePropagation();
Ketika salah satu peristiwa pendengar memanggil StopImmediatePropagation, tidak ada pendengar peristiwa lain yang terkait dengan objek yang dipicu.
Bagaimana AWS dapat mendukung kebutuhan JavaScript Anda?
Amazon Web Services (AWS) menawarkan AWS SDK for JavaScript sehingga Anda dapat dengan mudah menggunakan layanan dalam aplikasi Anda dengan pustaka dan API.
Anda dapat menggunakan SDK untuk mengembangkan aplikasi web sisi server, web, dan seluler. SDK ini mendukung runtime JavaScript, Node.JS, dan React Native, serta lintas runtime. Hal ini memungkinkan developer untuk menjalankan paket layanan klien yang sama pada platform yang berbeda.
Berikut adalah manfaat lain penggunaan SDK:
- SDK ditulis dalam TypeScript. Hal ini dapat memberikan berbagai manfaat, seperti pemeriksaan tipe statis serta dukungan kelas dan modul.
- SDK ini menawarkan tumpukan perangkat lunak perantara yang memungkinkan Anda untuk memasukkan tindakan kustom.
- SDK ini memiliki arsitektur modular. Hal ini memungkinkan Anda untuk hanya menggunakan paket yang diperlukan guna mengoptimalkan performa aplikasi.
Mulai menggunakan aplikasi JavaScript dengan mendaftar akun AWS sekarang juga.
