Memahami Propagasi Acara dalam JavaScript

Peristiwa dalam JavaScript bertindak seperti pemberitahuan bahwa interaksi pengguna, atau tindakan lain, telah terjadi. Misalnya, ketika Anda mengklik tombol formulir, browser Anda membuat acara untuk menunjukkan bahwa ini telah terjadi. Mengetik di kotak pencarian juga memunculkan acara dan ini adalah cara kerja saran otomatis secara online.

Dalam JavaScript, peristiwa yang melibatkan interaksi pengguna biasanya dipicu oleh elemen tertentu. Misalnya, mengklik tombol memunculkan peristiwa terhadap tombol itu. Tetapi peristiwa juga menyebar: mereka menyerang elemen lain dalam hierarki dokumen.

Baca terus untuk mengetahui semua tentang propagasi acara dan dua jenis berbeda yang tersedia.

Apa itu Penanganan Acara di JavaScript?

Anda dapat menggunakan kode JavaScript untuk menangkap, dan menanggapi, peristiwa yang muncul di halaman web. Anda dapat melakukan ini untuk mengganti perilaku default atau mengambil tindakan saat tidak ada default. Contoh umum adalah validasi formulir. Penanganan acara memungkinkan Anda untuk mengganggu proses pengiriman formulir yang normal.

Pertimbangkan contoh ini:

Klik Saya

Kode di atas memiliki elemen tombol dengan id bernama tombol. Ini memiliki pendengar acara klik yang menampilkan peringatan dengan pesan Halo Dunia.

Apa itu Propagasi Acara?

Propagasi peristiwa menggambarkan urutan perjalanan peristiwa melalui pohon DOM saat browser web mengaktifkannya.

Asumsikan ada tag formulir di dalam tag div, dan keduanya memiliki pendengar acara onclick. Propagasi Peristiwa menjelaskan bagaimana satu pendengar peristiwa dapat diaktifkan setelah yang lain.

Ada dua jenis propagasi:

1. Gelembung peristiwa, di mana peristiwa menggelembung ke atas, dari anak ke orang tua.
2. Penangkapan peristiwa, di mana peristiwa berjalan ke bawah, dari orang tua ke anak.

Apa Itu Gelembung Acara di JavaScript?

Gelembung acara berarti arah propagasi acara akan dari elemen anak ke elemen induknya.

Perhatikan contoh berikut. Ini memiliki tiga elemen bersarang: div, form, dan button. Setiap elemen memiliki klik pendengar acara. Browser menampilkan peringatan dengan pesan saat Anda mengklik setiap elemen.

Secara default, urutan di mana browser web menampilkan peringatan adalah tombol, formulir, lalu div. Peristiwa menggelembung dari anak ke orang tua.

 div


 membentuk 



 Tombol

Apa itu Pengambilan Acara?

Dengan event capture, urutan propagasi adalah kebalikan dari bubbling. Kalau tidak, konsepnya identik. Satu-satunya perbedaan dengan menangkap adalah bahwa peristiwa terjadi dari orang tua ke anak. Berbeda dengan contoh sebelumnya, dengan pengambilan peristiwa, browser akan menampilkan peringatan dalam urutan ini: div, formulir, dan tombol.

Untuk mencapai penangkapan acara, Anda hanya perlu membuat satu perubahan pada kode. Parameter kedua dari tambahkanEventListener() menentukan jenis propagasi. Ini salah secara default, untuk mewakili gelembung. Untuk mengaktifkan perekaman peristiwa, Anda perlu menyetel parameter kedua ke true.

 div.addEventListener("klik", ()=>{
 waspada("div")
 }, benar);
 form.addEventListener("klik", ()=>{
 waspada("formulir")
 }, benar);
 button.addEventListener("klik", ()=>{
 waspada("tombol")
 }, benar);

Bagaimana Anda Dapat Mencegah Propagasi Acara?

Anda dapat menghentikan penyebaran acara menggunakan berhentiPropagasi() metode. Itu tambahkanEventListener() metode menerima nama event dan fungsi handler. Handler mengambil objek event sebagai parameternya. Objek ini menyimpan semua informasi tentang acara tersebut.

Saat Anda memanggil berhentiPropagasi() metode, acara akan berhenti menyebar dari titik itu. Misalnya, ketika Anda menggunakan berhentiPropagasi() pada elemen formulir, acara akan berhenti menggelegak hingga div. Jika Anda mengklik tombol, Anda akan melihat peristiwa yang muncul pada tombol dan formulir, tetapi bukan div.

form.addEventListener("klik", (e)=>{
e.stopPropagasi();
 alert("formulir");
});

Terkait: Lembar Cheat JavaScript Ultimate

JavaScript Memiliki Banyak Kekuatan di Balik Terpal

Penanganan acara JavaScript sangat kuat, sebanding dengan banyak bahasa antarmuka lengkap. Saat Anda mengembangkan aplikasi web interaktif, ini adalah bagian penting dari kotak peralatan Anda. Tetapi ada banyak topik lanjutan lainnya yang harus dipahami. Untuk pengembang JavaScript profesional, ada banyak hal yang harus dipelajari!

Jika Anda ingin belajar membuat kode JavaScript seperti seorang profesional, lihat panduan kami untuk liner pintar dan bersiaplah untuk tampil memukau dalam wawancara Anda berikutnya.

11 JavaScript One-Liners Yang Harus Anda Ketahui

Raih banyak hal hanya dengan sedikit kode menggunakan rangkaian luas JavaScript one-liners ini.

Baca Selanjutnya

Tentang Penulis