JavaScript - Event Bubbling: Panduan untuk Pemula

Hai teman-teman, para ahli JavaScript masa depan! ? Hari ini, kita akan memulai perjalanan menarik ke dunia Event Bubbling. Jangan khawatir jika Anda belum pernah mendengar tentang ini sebelumnya - pada akhir tutorial ini, Anda akan penuh dengan pengetahuan! (Lihat apa yang saya lakukan di sana? ?)

Apa Itu Event Bubbling?

Bayangkan Anda di sebuah gathering keluarga, dan Anda bercerita lebaran kepada sepupu Anda. Sepupu Anda tertawa, kemudian bibi Anda mendengar dan meriang, lalu kakek dan nenek Anda mendengar dan mulai tertawa. Itu seperti event bubbling di JavaScript!

Dalam istilah teknis, event bubbling adalah suatu cara propogasi event di pohon HTML DOM (Document Object Model). Ketika suatu event terjadi pada elemen, pertama kali menjalankan handler pada elemen itu, kemudian pada parentnya, dan akhirnya ke semua pewarisan lainnya.

mariuraikan ini dengan contoh sederhana:

<div id="grandparent">
<div id="parent">
<button id="child">Klik saya!</button>
</div>
</div>

document.getElementById('child').addEventListener('click', function() {
console.log('Anak diklik!');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Orangtua diklik!');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Kakek diklik!');
});

Jika Anda mengklik tombol, Anda akan melihat ini di console:

Anak diklik!
Orangtua diklik!
Kakek diklik!

Ini adalah event bubbling dalam aksi! Event dimulai dari tombol (anak), kemudian membubbling ke parentnya, dan akhirnya ke kakek.

Langkah-langkah Event Bubbling

Sekarang kita mengerti konsep dasar, mari uraikan langkah-langkah event bubbling:

1. Event terjadi pada elemen paling dalam (elemen target).
2. Handler event pada elemen target dijalankan.
3. Event membubbling ke elemen parent, dan handler eventnya dijalankan.
4. Ini terus berlanjut sampai mencapai objek document.

Itu seperti permainan "lempar parcel" di mana setiap elemen mendapat kesempatan untuk menangani event saat itu bergerak naik di pohon DOM.

Event Bubbling menggunakan 2 DIV bersarang

mari lihat contoh yang lebih praktis dengan dua div bersarang:

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
Klik saya!
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('Div luar diklik');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('Div dalam diklik');
});

Ketika Anda mengklik div merah dalam, Anda akan melihat:

Div dalam diklik
Div luar diklik

Event dimulai di div dalam dan membubbling ke div luar. Itu seperti melempar batu ke dalam kolam - gelombang dimulai dari pusat dan bergerak ke luar!

Event Bubbling menggunakan 3 Tingkat Bersarang

Sekarang, mari tambahkan tingkat lain ke contoh kita:

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
Klik saya!
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Div kakek diklik');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Div orangtua diklik');
});

document.getElementById('child').addEventListener('click', function() {
console.log('Div anak diklik');
});

Sekarang, ketika Anda mengklik div merah paling dalam, Anda akan melihat:

Div anak diklik
Div orangtua diklik
Div kakek diklik

Itu seperti hierarki keluarga - si kecil berbicara duluan, kemudian orangtua, dan akhirnya kakek!

Menghentikan Event Bubbling

kadang-kadang, Anda mungkin ingin menghentikan perilaku bubbling ini. Mungkin Anda tidak ingin kakek mendengar lebaran itu! Di JavaScript, kita bisa melakukan ini dengan menggunakan metode stopPropagation():

document.getElementById('child').addEventListener('click', function(event) {
console.log('Div anak diklik');
event.stopPropagation();
});

Sekarang, ketika Anda mengklik div anak, Anda hanya akan melihat:

Div anak diklik

Event berhenti di sana, seperti memasukkan korek di botol!

Metode berguna untuk Penanganan Event

Berikut adalah tabel metode berguna untuk penanganan event di JavaScript:

Metode	Deskripsi
addEventListener()	Menambahkan handler event ke elemen
removeEventListener()	Menghapus handler event dari elemen
event.stopPropagation()	Menghentikan event dari membubbling di pohon DOM
event.preventDefault()	Menghentikan aksi default event
event.target	Mengembalikan elemen yang memicu event
event.currentTarget	Mengembalikan elemen yang memiliki event listener yang memicu event

Kesimpulan

Dan begitu juga, teman-teman! Kita telah membubbling melalui konsep Event Bubbling di JavaScript. Ingat, memahami event bubbling sangat penting untuk mengelola penanganan event yang kompleks dalam aplikasi web Anda. Itu seperti memahami dinamika keluarga di sebuah pertemuan - mengetahui siapa yang mendengar apa dan kapan bisa menyelamatkan Anda dari banyak kebingungan!

Latih dengan contoh ini, eksperimen dengan struktur bersarang yang berbeda, dan segera Anda akan menangani event seperti seorang ahli. Selamat coding, dan may event Anda selalu membubbling dengan mulus! ?

Credits: Image by storyset