Mengenal Fase Event di DOM: Kuasai Cara Kerja Event Listener!

Mengenal Fase Event di DOM: Kuasai Cara Kerja Event Listener!

Hey, fellow developers! Jika Anda pernah bertanya-tanya mengapa mengklik elemen yang bersarang sometimes memicu beberapa event handler dalam urutan tertentu — atau mengapa menambahkan true sebagai parameter ketiga ke addEventListener() mengubah semua — Anda berada di tempat yang tepat.

Kita akan membahas tiga fase event di DOM, bagaimana addEventListener() mengontrolnya dengan parameter ketiganya, dan apa yang terjadi di balik layar ketika Anda mengklik sebuah elemen.

Tiga Parameter addEventListener()

Metode addEventListener() menerima hingga tiga argumen: element.addEventListener(event, callback, options);

• event — Nama event (misalnya, "click", "mouseover")
• callback — Fungsi yang dijalankan ketika event terjadi
• options — Ini adalah tempat magic terjadi! Ini dapat berupa boolean atau objek yang menentukan karakteristik tentang event listener.

Fase Event Bubbling vs Capturing

Bayangkan Anda mengklik elemen anak di dalam elemen induk. Apakah event dimulai dari anak dan naik? Atau dimulai dari atas dan turun?

• Bubbling (default, false): Event dimulai dari elemen target dan "menggelembung" ke atas (bawah → atas).
• Capturing (true): Event dimulai dari window dan "menangkap" ke bawah ke elemen target (atas → bawah).

Tiga Fase Event

Setiap event DOM melewati tiga fase yang berbeda:

1. Fase Capturing (atas → bawah) — hanya berjalan jika listener ditambahkan dengan true
2. Fase Target — event telah mencapai elemen yang sebenarnya diklik
3. Fase Bubbling (bawah → atas) — perilaku default

Kesimpulan

Mengenal fase event di DOM dan cara kerja addEventListener() dapat membantu Anda meningkatkan kemampuan coding Anda. Dengan memahami bagaimana event listener bekerja, Anda dapat membuat aplikasi yang lebih kompleks dan efektif.