Panduan untuk Event Capturing di JavaScript

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan memulai perjalanan menarik ke dalam 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 kesukaan Anda, dan mari kita masuk ke dalamnya!

Apa Itu Event Capturing?

Sebelum kita masuk ke detailnya, mari kita mulai dengan analogi sederhana. Bayangkan Anda di acara keluarga, dan sepupu kecil yang menyenangkan Anda mengatakan sesuatu yang lucu. Teriakan tawa dimulai dari kakek-nenek (generasi tertua), kemudian bergerak ke orang tua Anda, dan akhirnya mencapai Anda. Ini mirip dengan bagaimana event capturing bekerja di JavaScript!

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

Sekarang, mari kitaura ini dalam istilah teknis yang lebih rinci:

1. Ketika sebuah 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 hingga mencapai elemen target.
4. Perjalanan turun ini adalah apa yang kita sebut "event capturing."

Contoh: Event Capturing Dasar

Ayo lihat contoh dasar untuk melihat event capturing dalam aksi. Kita akan membuat struktur HTML sederhana dan menambahkan beberapa 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 pendengar event klik ke setiap div. Parameter true di addEventListener mengaktifkan event capturing.

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

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 sedang mengatakan "Halo!" ke setiap induknya saat bergerak turun ke target.

Contoh: Mencegah Perilaku Bawaan

kadang-kadang, kita ingin menghentikan perilaku bawaan dari suatu event. Misalnya, mencegah form dari pengiriman atau tautan dari diikuti. Ayo 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. Pendengar event div kontainer menggunakan event.preventDefault() untuk menghentikan aksi bawaan 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 Propagasi

kadang-kadang, kita mungkin ingin menghentikan event dari bergerak lebih jauh ke pohon DOM. Kita bisa melakukan ini menggunakan event.stopPropagation(). Ayo 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 orang tua 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 orang tua diklik

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

Penutup

Dan begitu, teman-teman! Kita telah melintasi negeri event capturing, dari konsep dasar ke mencegah perilaku bawaan dan menghentikan propagasi. Ingat, event capturing hanya satu bagian dari aliran event di JavaScript. Itu seperti pengantar sebelum acara utama (bekerjaan).

Berikut adalah ringkasan metode yang kita gunakan:

Metode	Deskripsi
addEventListener(event, function, useCapture)	Menambahkan pendengar event ke elemen. Set useCapture ke true untuk event capturing.
event.preventDefault()	Mencegah aksi bawaan event.
event.stopPropagation()	Menghentikan event dari membubur ke pohon DOM, mencegah pendengar 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. Selamat pemrograman, dan may event Anda selalu tercapai dengan baik!

Credits: Image by storyset