Event Bubbling dan Event Capturing adalah dua mekanisme yang memungkinkan kita untuk membuat kode JavaScript yang responsif terhadap aksi yang dilakukan oleh pengguna pada elemen HTML. Dalam konsep ini, setiap elemen HTML memiliki event yang terkait dengannya. Setiap kali event ini dipicu, maka browser akan mengeksekusi sebuah kode JavaScript yang kita tulis.
Event Bubbling adalah mekanisme di mana event yang terjadi pada elemen anak akan diteruskan ke elemen induknya hingga sampai ke elemen root (elemen html). Dalam hal ini, kode JavaScript yang kita tulis akan dieksekusi dari elemen terbawah ke atas.
Sedangkan Event Capturing adalah mekanisme di mana event yang terjadi pada elemen anak akan diteruskan ke elemen induknya hingga sampai ke elemen root (elemen html), tetapi kode JavaScript akan dieksekusi dari atas ke bawah.
Untuk menggunakan Event Bubbling dan Event Capturing, kita bisa menggunakan properti addEventListener(). Berikut ini adalah contohnya:
Pada contoh di atas, kita menggunakan Event Bubbling dan Event Capturing pada elemen div dan paragraf. Saat kita mengklik pada paragraf, maka akan terlihat log dari Event Bubbling dan Event Capturing yang dieksekusi.
Dengan memahami Event Bubbling dan Event Capturing, kita bisa membuat kode JavaScript yang lebih responsif dan efisien. Oleh karena itu, mari belajar dan terapkan konsep ini pada proyek-proyek kita selanjutnya.
.png)
0 Komentar