JavaScript - Event Capturing: Panduan untuk Pemula

Hai teman-teman, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia Event Capturing. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan menjelajahi konsep ini bersama langkah demi langkah. Jadi, ambil secangkir minuman favorit Anda, dan mari kita masuk ke dalam!

Apa Itu Event Capturing?

Sebelum kita masuk ke detilnya, mari kita mulai dengan analogi sederhana. Bayangkan Anda di sebuah gathering keluarga, dan keponakan yang lucu Anda mengatakan sesuatu yang lucu. Tertawa mulai dari kakek-nenek Anda (generasi tertua), lalu bergerak ke orang tua Anda, dan akhirnya mencapai Anda. Ini hampir mirip dengan cara event capturing bekerja di JavaScript!

Dalam dunia pengembangan web, event capturing adalah fase dari event propagation di mana suatu event pertama kali ditangkap oleh elemen paling luar dan kemudian diteruskan ke elemen-elemen dalam. Itu seperti permainan "pass the parcel," tapi dengan event!

Sekarang, mari kita rincikan ini dalam istilah yang lebih teknis:

1. Ketika suatu event terjadi di halaman web (seperti klik), itu tidak hanya terjadi di elemen yang Anda klik.
2. Event dimulai dari puncak pohon DOM (Document Object Model).
3. Kemudian itu bergerak turun melalui semua elemen induk sampai mencapai elemen target.
4. Perjalanan turun ini adalah apa yang kita sebut "event capturing."

Contoh: Event Capturing Dasar

Mari kita lihat contoh dasar untuk melihat event capturing dalam aksi. Kita akan membuat struktur HTML sederhana dan menambahkan sedikit JavaScript untuk menunjukkan bagaimana capturing bekerja.

<div id="outer">
<div id="middle">
<div id="inner">Klik saya!</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

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

middle.addEventListener('click', function() {
console.log('Div tengah diklik');
}, true);

inner.addEventListener('click', function() {
console.log('Div dalam diklik');
}, true);
</script>

Dalam contoh ini, kita memiliki tiga elemen <div> bersarang. Kode JavaScript menambahkan pengguna event listener ke setiap div. Parameter true dalam addEventListener mengaktifkan event capturing.

Ketika Anda mengklik div paling dalam, Anda akan melihat output berikut di console:

Div luar diklik
Div tengah diklik
Div dalam diklik

Ini menunjukkan event yang ditangkap dari elemen paling luar ke elemen paling dalam. Itu seperti event mengatakan "Halo!" ke setiap induknya di perjalanan ke target.

Contoh: Mencegah Perilaku Default

kadang-kadang, kita ingin menghentikan perilaku default dari suatu event. Misalnya, mencegah form dari pengiriman atau tautan dari diikuti. Mari kita lihat bagaimana kita bisa melakukan ini dengan event capturing:

<div id="container">
<a href="https://www.example.com" id="link">Klik saya!</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('Div kontainer diklik');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('Tautan diklik');
}, true);
</script>

Dalam contoh ini, kita memiliki tautan di dalam div kontainer. Listener event div kontainer menggunakan event.preventDefault() untuk menghentikan aksi default tautan.

Ketika Anda mengklik tautan, Anda akan melihat:

Div kontainer diklik
Tautan diklik

Tapi tautan tidak akan benar-benar membawa Anda ke URL. Itu seperti kontainer mengatakan, "Tidak, kita tinggal di sini!"

Contoh: Capturing dan Menghentikan Propagation

kadang-kadang, kita mungkin ingin menghentikan event dari bergerak lebih jauh ke pohon DOM. Kita bisa melakukan ini menggunakan event.stopPropagation(). Mari kita lihat bagaimana:

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

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

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

parent.addEventListener('click', function(event) {
console.log('Div orangtua diklik');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('Div anak diklik');
}, true);
</script>

Dalam contoh ini, ketika Anda mengklik div anak, Anda hanya akan melihat:

Div kakek diklik
Div orangtua diklik

Event berhenti di induk dan tidak mencapai anak. Itu seperti induk mengatakan, "Cukup jauh, event muda!"

Penutup

Dan begitulah, teman-teman! Kita telah menjelajahi negeri event capturing, dari konsep dasar ke mencegah perilaku default dan menghentikan propagasi. Ingat, event capturing hanya satu bagian dari aliran event di JavaScript. Itu seperti act pertama sebelum acara utama (permainan kata yang dimaksudkan).

Berikut adalah ringkasan metode yang kita gunakan:

Metode	Deskripsi
addEventListener(event, function, useCapture)	Menambahkan pengguna event handler ke elemen. Set useCapture ke true untuk event capturing.
event.preventDefault()	Menghentikan aksi default event.
event.stopPropagation()	Menghentikan event dari bergerak ke pohon DOM, mencegah handler induk dari diberitahu tentang event.

Praktik konsep ini, mainkan dengan kode, dan segera Anda akan menjadi ahli dalam menangkap event! Ingat, dalam pemrograman, seperti dalam kehidupan, perjalanan sama pentingnya dengan tujuan. Semoga coding Anda selalu menyenangkan, dan event Anda selalu ditangkap dengan baik!

Credits: Image by storyset