Situ Frontend? Udah paham Event Bubbling dan Event Delegation belum?
Bayangkan kamu meniup sebuah balon di tengah-tengah pesta — balonnya pecah, dan semua orang di ruangan itu langsung kaget dan heboh. Begitulah cara event bubbling bekerja. Ketika kamu hanya perlu mengundang orang tua dari anak-anak yang akan datang ke pesta tanpa perlu mengundang anak yang bersangkutan. Begitulah cara event delegation bekerja.
Sebagai seorang Frontend, adalah sebuah keharusan untuk memahami kedua konsep ini. Dengan memahami keduanya, berinteraksi dengan JavasScript dan DOM akan menjadi lebih mudah dan efisien.
Event Bubbling
Event bubbling adalah sebuah mekanisme di JavaScript, di mana ketika kamu melakukan trigger event pada suatu elemen pada DOM, event tersebut akan naik ke atas, dari element yang diklik ke element parent-nya, dan terus berlanjut hingga menuju document.
Sekarang coba perhatikan kode berikut ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#blue {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 300px;
height: 300px;
background-color: lightblue;
}
#green {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 200px;
height: 200px;
background-color: lightgreen;
}
#red {
width: 100px;
height: 100px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div id="blue">
<div id="green">
<div id="red"></div>
</div>
</div>
</body>
<script>
const blue = document.getElementById('blue');
const green = document.getElementById('green');
const red = document.getElementById('red');
blue.addEventListener('click', onClick);
green.addEventListener('click', onClick);
red.addEventListener('click', onClick);
function onClick(e) {
console.log('Current Target:', e.currentTarget.id);
};
</script>
</html>Jika kamu membukanya di browser, maka kamu akan melihat tampilan seperti ini:
Sekarang, jika kamu mengklik kotak berwarna merah, maka di console akan menampilkan:
Current Target: red
Current Target: green
Current Target: blueJika yang diklik adalah kotak berwarna hijau, maka yang akan muncul di console adalah:
Current Target: green
Current Target: blueDan terakhir, jika yang kamu klik adalah kotak berwarna biru, maka yang akan muncul di console adalah:
Current Target: blueHal ini bisa terjadi dikarenakan secara default, event pada JavaScript akan berpropagasi, dan inilah yang disebut dengan event bubbling.
Apakah event bubbling ini bisa dihentikan? — Tentu saja!
Caranya adalah dengan menghentikan propagasi pada event yang sedang berjalan dengan menggunakan e.stopPropagation(), coba perhatikan kode berikut:
function onClick(e) {
console.log('Current Target:', e.currentTarget.id);
e.stopPropagation();
};Dengan kode di atas, console hanya akan menampilkan tulisan sesuai dengan elemen yang diklik, jika yang diklik adalah kotak merah, maka yang muncul hanyalah Current Target: red, begitupun seterusnya.
Sedangkan jika kamu ingin menghentikan nya pada kondisi tertentu, bisa juga menggunakan code di bawah ini:
function onClick(e) {
console.log('Current Target:', e.currentTarget.id);
if (e.currentTarget.id === 'green') {
e.stopPropagation();
}
};Dengan kode ini, ketika kamu mengklik kotak berwarna merah, maka yang muncul di console adalah:
Current Target: red
Current Target: greenKarena propagasi akan berhenti setelah mencapai kotak berwarna hijau.
Event Delegation
Dengan adanya event bubbling pada JavaScript, ini memungkinkanmu untuk bisa melakukan teknik event delegation untuk mempersingkat kodingan mu dan juga menghemat performa, keran cukup membuat 1 event yang bisa di delegasikan.
Persis seperti ilustrasi yang saya buat di atas, begitupun pada JavaScript, ketika kamu ingin memasang event pada suatu elemen yang seragam dan berulang, kamu tidak perlu memasang event pada setiap elemen tersebut, kamu cukup mendelegasikan nya ke parent dari elemen-elemen yang ingin kamu pasangi event tersebut, maka semua elemen pun akan memilki event tanpa perlu di pasang satu persatu.
Masih pusing?
Coba perhatikan contoh sederhana berikut ini:
...
<ul id="todo-list">
<li>Sikat gigi</li>
<li>Makan pagi</li>
<li>Memakai Sepatu</li>
</ul>
...
<script>
document.getElementById('todo-list').addEventListener('click', function(e) {
if (e.target.tagName === 'LI') {
console.log('Todo yang diklik:', e.target.textContent);
}
});
</script>Dengan kode di atas, setiap elemen li akan memiliki event on click yang sama, tanpa perlu kamu pasang satu persatu kepada semua elemen li yang ada di sana. Kamu cukup mesang nya ke parent dari semua elemen yang ingin kita pasangi event tersebut.
Begitupun ketika kamu menambahkan eleme li baru secara dinamis, maka elemen baru tersebut akan secara otomatis memiliki event yang sama.
Mudah dan sederhana bukan?
Happy Coding ^^
