JavaScript - Penembusan Acara: Panduan untuk Pemula

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

Apa Itu Penembusan Acara?

Bayangkan Anda di sebuah gathering keluarga, dan Anda memberikan lelucon kepada sepupu Anda. Sepupu Anda tertawa, lalu bibi Anda mendengar dan merawa, lalu kakek nenek Anda mendengar dan mulai tertawa. Itu seperti penembusan acara dalam JavaScript!

Dalam istilah teknis, penembusan acara adalah suatu cara penyebaran acara dalam pohon DOM (Document Object Model) HTML. Ketika suatu acara terjadi pada elemen, pertama kali menjalankan handler pada elemen itu, lalu pada induknya, dan akhirnya ke seluruh kakek neneknya.

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('Induk diklik!');
});

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

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

Anak diklik!
Induk diklik!
Kakek nenek diklik!

Ini adalah penembusan acara dalam aksi! Acara dimulai dari tombol (anak), lalu menembus ke induknya, dan akhirnya ke kakek nenek.

Langkah-langkah Penembusan Acara

Sekarang kita mengerti konsep dasar, mari uraikan langkah-langkah penembusan acara:

1. Acara terjadi pada elemen terdalam (elemen target).
2. Handler acara pada elemen target dijalankan.
3. Acara menembus ke elemen induk, dan handler acara dijalankan.
4. Ini terus berlanjut sampai mencapai objek document.

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

Penembusan Acara 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

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

Penembusan Acara menggunakan 3 Tingkat Bersarang

Sekarang, mari tambahkan tingkat lain ke contohnya:

<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 nenek diklik');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Div induk 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 induk diklik
Div kakek nenek diklik

Itu seperti hierarki keluarga - anak yang paling muda berbicara duluan, lalu orang tua, dan akhirnya kakek nenek!

Menghentikan Penembusan Acara

kadang-kadang, Anda mungkin ingin menghentikan perilaku penembusan ini. Mungkin Anda tidak ingin kakek nenek mendengar lelucon itu! Dalam JavaScript, kita bisa melakukan ini 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

Acara berhenti di sana, seperti menutup botol dengan korek!

Metode berguna untuk Penanganan Acara

Berikut adalah tabel metode berguna untuk penanganan acara dalam JavaScript:

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

Kesimpulan

Dan begitulah, teman-teman! Kita telah menembus konsep Penembusan Acara dalam JavaScript. Ingat, memahami penembusan acara sangat penting untuk mengelola penanganan acara yang kompleks dalam aplikasi web Anda. Itu seperti memahami dinamika keluarga dalam sebuah reunion - mengetahui siapa yang mendengar apa dan kapan bisa menyelamatkan Anda dari banyak kebingungan!

Praktik dengan contoh-contoh ini, eksperimen dengan struktur bersarang yang berbeda, dan segera Anda akan menjadi ahli dalam penanganan acara. Selamat coding, dan semoga acara Anda selalu menembus dengan mulus! ?

Credits: Image by storyset