Event Bubbling dan Event Capturing di Javascript Dijelaskan: Bagaimana Cara Memanfaatkannya?
Diterbitkan: 2020-03-26Daftar isi
pengantar
Dua istilah yang sangat umum digunakan untuk alur peristiwa dalam JavaScript adalah Penggelegakan Peristiwa dan Penangkapan Peristiwa .
Ini adalah dua cara penting di mana suatu peristiwa disebarkan di HTML DOM API ketika kedua elemen mendaftarkan pegangan untuk suatu peristiwa dan peristiwa itu terjadi di elemen yang bersarang di elemen lain. Urutan di mana suatu peristiwa diterima oleh elemen ditentukan oleh mode propagasi peristiwa. Baca terus untuk mengetahui penggunaan Event Bubbling dan Event Capturing dalam JavaScript dan mengapa ini diperlukan dalam pengembangan halaman web.
takeaways kunci
- Menjelaskan istilah event, event flow, event handler dan event listener
- Penggelembungan Acara dan Penangkapan Acara dalam JavaScript
- Utilitas Penggelembungan Acara dan Penangkapan Acara dalam JavaScript
Acara dan alur acara
Interaksi halaman web HTML dengan JavaScript dimediasi oleh peristiwa yang terjadi ketika halaman dimanipulasi oleh pengguna atau browser. Pemuatan halaman, pengguna mengklik tombol, menutup jendela, adalah contoh kejadian.
Urutan peristiwa yang diterima di halaman web disebut sebagai aliran peristiwa. Proses alur event diselesaikan dalam 3 langkah – event capture (mencegat event), event targeting (target mendapatkan event) dan event bubbling (respon terhadap event).
Penangan Acara dan Pendengar Acara di JavaScript
Event Handler adalah kode JavaScript yang ditulis di dalam tag HTML, bukan di dalam tag <script>. Event Handler mengeksekusi JavaScript ketika sebuah event terjadi seperti menekan sebuah tombol. Sintaks dasarnya adalah: name_of_handler="kode JavaScript di sini"
<a href=”https://www.google.com” onClick=”alert('hello!”)”>Goolge</a>
Prosedur yang menunggu terjadinya suatu event adalah Event Listener. JavaScript memiliki fungsi bawaan, addEventListener(), yang menerima peristiwa untuk didengarkan, dan memanggil argumen kedua saat peristiwa tersebut diaktifkan. Sintaksnya adalah: element.addEventListener(event, listener);
Gelembung Acara dalam JavaScript
Event Bubbling adalah terminologi umum yang ditemui saat mengembangkan halaman web atau aplikasi web menggunakan JavaScript. Event bubbling adalah tahapan dalam proses aliran event ketika event dimulai pada elemen yang paling spesifik atau node yang paling bersarang di DOM dan selanjutnya mengalir ke atas menuju node yang paling tidak spesifik, yaitu dokumen.
Sumber
<!DOCTYPE HTML>
<html>
<kepala>
<judul>……</judul>
</head>
<tubuh>
<div id="demo"> Tekan di sini.</div>
</tubuh>
</html>
Saat mengklik elemen <div>, acara 'klik' terjadi dalam urutan berikut:
- <div>
- <tubuh>
- <html>
- Dokumen
Acara 'klik' memicu elemen <div>. Setiap node selanjutnya ditembakkan di sepanjang pohon DOM, ke atas, hingga dokumen objek tercapai.
Baca: Ide dan Topik Proyek Tumpukan Penuh
Pengambilan Acara dalam JavaScript
Event Capturing merupakan model alternatif dalam aliran event yang pertama kali diperkenalkan oleh Netscape Browser. Seperti yang dinyatakan oleh model ini, suatu peristiwa diterima terlebih dahulu oleh simpul yang paling tidak spesifik dan simpul yang paling spesifik atau elemen yang paling bersarang menerima peristiwa tersebut terakhir. Dalam model ini, suatu peristiwa dicegat sebelum mencapai target yang sebenarnya. Namun, tidak seperti Event Bubbling, browser modern kekurangan dukungan untuk model ini dan dengan demikian, Event Capturing hanya dapat digunakan dalam keadaan tertentu.
Sumber
Mengacu pada contoh yang dinyatakan di bagian sebelumnya, mengklik elemen <div> akan mengaktifkan 'klik' acara dalam urutan berikut:
- Dokumen
- <tubuh>
- <html>
- <div>
Apa yang terjadi dalam Fase Penangkapan Peristiwa?
Dalam fase penangkapan peristiwa, pendengar penangkap yang nilainya terdaftar sebagai "benar", dipanggil. Itu ditulis dengan cara berikut:
el.addEventListener('Klik', pendengar, benar)
Di sini suatu peristiwa ditangkap karena nilai pendengar terdaftar sebagai "benar". Jika tidak ada nilai, nilai defaultnya adalah "false" dengan hasil bahwa peristiwa tersebut tidak ditangkap. Oleh karena itu dalam fase ini, hanya peristiwa dengan nilai sebenarnya yang dipanggil dan ditangkap. Pada fase target berikutnya, semua pendengar yang terdaftar dipanggil, terlepas dari apakah nilainya terdaftar sebagai benar atau salah.
Alur acara DOM di JavaScript
DOM Level 2 menetapkan tiga tahap untuk model aliran peristiwa:
- Tahap Penangkapan Acara
- tepat sasaran
- Fase Gelembung Acara
Sumber
Jika ada peluang untuk menyadap event tersebut, Event Capturing terjadi terlebih dahulu. Ini diikuti oleh target aktual untuk mendapatkan acara tersebut. Akhirnya, pada Fase Gelembung Acara, Respons terakhir terhadap acara berlangsung. Mengacu pada contoh yang dinyatakan di bagian sebelumnya, mengklik elemen <div> akan memicu peristiwa 'klik' dalam urutan yang diilustrasikan dalam diagram di atas.
Baca: Gaji Pengembang Tumpukan Penuh di India
Utilitas Penggelembungan Acara dan Penangkapan Acara dalam JavaScript
Dalam Fase Gelembung Peristiwa, hanya peristiwa yang memiliki nilai tanda “false” (bukan penangkap) yang dipanggil. Event Bubbling dan Event Capturing adalah aspek penting dari DOM.
el.addEventListener('Klik', pendengar, salah) // pendengar tidak menangkap
el.addEventListener('Klik', pendengar) // pendengar tidak menangkap
Kode di atas mencontohkan bagaimana fase menggelegak dan menangkap bekerja. Setiap event tidak mencapai target. Beberapa acara tidak digelembungkan dan berhenti setelah fase target. Acara bubbling tidak berlaku di semua jenis acara dan pendengar harus memiliki properti Boolean ".bubble" dari objek acara selain memiliki beberapa properti lain seperti – e.target (untuk referensi target acara) dan e.eventPhase (pendengar saat ini mendaftar pada mode ini).
Kesimpulan
Alur peristiwa dalam JavaScript memiliki tiga fase penting – fase Penangkapan Peristiwa, fase target, dan Fase Gelembung Peristiwa. Event Menangkap adalah yang pertama terjadi, di mana peristiwa dicegat jika perlu. Ini diikuti oleh peristiwa yang mencapai target aktual dan fase terakhir adalah bubbling, ketika respons akhir terhadap suatu peristiwa terjadi. Dengan demikian, dapat disimpulkan dengan tepat bahwa Event Bubbling dan Event Capturing dalam JavaScript adalah dasar di mana event handler dan delegasi acara bergantung.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang tumpukan penuh, lihat Diploma PG UpGrad & IIIT-B dalam Pengembangan Perangkat Lunak Tumpukan Penuh yang dirancang untuk para profesional yang bekerja dan menawarkan 500+ jam pelatihan ketat, 9+ proyek dan tugas, IIIT- B Status alumni, proyek batu penjuru praktis & bantuan pekerjaan dengan perusahaan-perusahaan top.