Event bubbling adalah salah satu konsep DOM yang sangat penting karena menjelaskan kenapa ketika kita klik elemen anak (child), event-nya juga bisa ditangani oleh elemen-elemen parent di atasnya.

Lecture ini sebenarnya sedang menggabungkan beberapa konsep yang sudah kamu pelajari sebelumnya:

• DOM
• nested elements
• event
• event handler
• event object
• addEventListener() / onclick
• function
• stopPropagation()

Mari kita bedah pelan-pelan.

1. Apa itu Event Bubbling?

Secara sederhana:

Event bubbling adalah proses ketika sebuah event yang terjadi pada elemen child “naik” ke parent, lalu ke parent berikutnya, dan seterusnya.

Bayangkan struktur HTML seperti ini:

header
  └── div
       └── button

Artinya:

header = parent dari div
div    = parent dari button
button = child dari div
div    = child dari header

Kalau kita klik button:

        header
          ↑
          │ event naik
          │
         div
          ↑
          │ event naik
          │
        button
          ↑
       KITA KLIK

Event dimulai dari:

button

kemudian naik ke:

div

kemudian naik ke:

header

Proses “naik” inilah yang disebut:

Event Bubbling

2. Kenapa Disebut “Bubbling”?

Kata bubble berarti gelembung.

Bayangkan kamu meniup gelembung di dasar air:

        🌊
       ↑
      ○
     ↑
    ○
   ↑
  ○

Gelembung bergerak dari bawah ke atas.

Event bubbling juga begitu:

button
   ↑
  div
   ↑
header

Event “naik” dari elemen paling dalam menuju parent-parent-nya.

3. Mari Lihat Struktur HTML-nya

Misalnya kita punya:

<header onclick="alert('header clicked')">

    <div onclick="alert('div clicked')">

        <button onclick="alert('button clicked')">
            Login
        </button>

    </div>

</header>

Strukturnya:

<header>
    │
    └── <div>
          │
          └── <button>
                Login
              </button>
        </div>
</header>

Ada tiga event handler:

Button

onclick="alert('button clicked')"

Div

onclick="alert('div clicked')"

Header

onclick="alert('header clicked')"

4. Apa yang Terjadi Ketika Button Diklik?

Misalnya kita klik:

[ Login ]

Kita mungkin berpikir:

“Saya hanya klik button. Kenapa div dan header ikut bereaksi?”

Nah, ini inti event bubbling.

Urutannya kira-kira:

1. User klik button
        ↓
2. Event click terjadi pada button
        ↓
3. Handler button dijalankan
        ↓
4. Event bubbling ke div
        ↓
5. Handler div dijalankan
        ↓
6. Event bubbling ke header
        ↓
7. Handler header dijalankan

Maka alert muncul:

button clicked
div clicked
header clicked

Jadi bukan berarti kita benar-benar melakukan tiga klik.

Kita hanya melakukan satu klik.

Yang terjadi adalah:

1 click event
     ↓
button handler
     ↓
div handler
     ↓
header handler

5. Hal yang Sangat Penting: Event Bisa Terjadi di Child Walaupun Child Tidak Punya Handler

Ini bagian yang sering membingungkan.

Misalnya kita hapus onclick dari button:

<header onclick="alert('header clicked')">

    <div onclick="alert('div clicked')">

        <button>
            Login
        </button>

    </div>

</header>

Sekarang:

header → punya handler
div    → punya handler
button → TIDAK punya handler

Lalu kita klik button.

Apa yang terjadi?

Tetap:

button
  ↓
div
  ↓
header

Karena event click tetap terjadi pada button.

Hanya saja:

button
  ↓
tidak punya handler
  ↓
event tetap bubbling
  ↓
div
  ↓
handler div dijalankan

Jadi akan muncul:

div clicked

kemudian:

header clicked

6. Ini Konsep yang Sangat Penting

Jangan menyamakan:

“Event terjadi”

dengan:

“Ada event handler di elemen tersebut.”

Contohnya:

<button>
    Login
</button>

Button tidak punya:

onclick="..."

Tetapi ketika diklik:

EVENT CLICK TETAP TERJADI

Hanya saja button tidak punya handler untuk menangani event tersebut.

Event kemudian bisa bubbling ke parent.

7. Visualisasi Lengkap

Misalnya:

<header>
    <div>
        <button>Login</button>
    </div>
</header>

Secara DOM:

HEADER
  │
  └── DIV
       │
       └── BUTTON

User:

       CLICK!
         ↓
      BUTTON
         │
         │ bubbling
         ↓
       DIV
         │
         │ bubbling
         ↓
      HEADER

Jadi arah bubbling:

Child
  ↑
Parent
  ↑
Grandparent
  ↑
...

8. Event Bubbling Terjadi pada Nested Elements

Kata kunci dari lecture ini adalah:

nested elements

Nested berarti elemen berada di dalam elemen lain.

Contoh:

<div>
    <button>Login</button>
</div>

button berada di dalam div.

Maka:

div
└── button

div adalah parent.

Kalau:

<header>
    <div>
        <button>Login</button>
    </div>
</header>

maka:

header
└── div
    └── button

Hubungannya:

header
  ↑
parent

div
  ↑
parent dari button

button
  ↑
element yang diklik

9. Bagaimana Cara Menghentikan Event Bubbling?

Nah, sekarang masuk ke bagian penting kedua.

Misalnya kita tidak ingin click pada button diteruskan ke parent.

Kita ingin:

CLICK BUTTON
     ↓
button handler
     ↓
STOP

Tidak ingin:

button
  ↓
div
  ↓
header

JavaScript menyediakan:

event.stopPropagation();

10. Apa Arti stopPropagation()?

Kita bisa membaca:

event.stopPropagation();

sebagai:

“Event ini, jangan diteruskan lagi ke parent.”

propagation = penyebaran/perambatan event.

Jadi:

stopPropagation()

=

hentikan penyebaran event.

11. Contoh dari Lecture

HTML:

<button onclick="showClickAlert(event)">
    Login
</button>

Kemudian JavaScript:

function showClickAlert(event) {
    event.stopPropagation();

    alert("button clicked");
}

Sekarang ketika button diklik:

CLICK
  ↓
BUTTON
  ↓
showClickAlert()
  ↓
stopPropagation()
  ↓
STOP

Event tidak diteruskan ke:

div

atau:

header

12. Kenapa Function Menerima event?

Perhatikan:

function showClickAlert(event) {

event di sini adalah event object.

Sama seperti yang kita pelajari sebelumnya pada keyboard event.

Misalnya:

document.addEventListener("keydown", function(event) {
    console.log(event.key);
});

event berisi informasi mengenai event yang sedang terjadi.

Pada click event, event object juga punya banyak informasi dan method.

Salah satunya:

event.stopPropagation();

Jadi:

event
  │
  ├── informasi event
  ├── target
  ├── type
  └── method
       └── stopPropagation()

13. Perhatikan Ini: event Bukan Kata Sakti

Kita bisa menamainya apa saja.

Contoh:

function showClickAlert(event) {
    event.stopPropagation();
}

Bisa juga:

function showClickAlert(e) {
    e.stopPropagation();
}

Bahkan:

function showClickAlert(clickEvent) {
    clickEvent.stopPropagation();
}

Semuanya bisa.

Yang penting adalah parameter tersebut menerima event object.

Biasanya developer menggunakan:

event

atau:

e

14. Sebelum dan Sesudah stopPropagation()

Tanpa stopPropagation()

User klik button
       ↓
     button
       ↓
      div
       ↓
    header

Semua handler yang sesuai bisa dijalankan.

Dengan stopPropagation()

User klik button
       ↓
     button
       ↓
stopPropagation()
       ↓
      STOP

Parent tidak menerima propagasi event tersebut.

15. Contoh Lengkap

Misalnya:

<header onclick="alert('header clicked')">

    <div onclick="alert('div clicked')">

        <button onclick="showClickAlert(event)">
            Login
        </button>

    </div>

</header>

JavaScript:

function showClickAlert(event) {
    event.stopPropagation();

    alert("button clicked");
}

Klik button:

button clicked

Selesai.

Tidak ada:

div clicked
header clicked

karena propagation dihentikan.

16. Apa Bedanya stopPropagation() dengan return false?

Untuk sementara, jangan menyamakan keduanya.

Konsep yang sedang kita pelajari adalah:

event.stopPropagation();

Tujuannya:

menghentikan event agar tidak terus propagate ke parent.

Sedangkan preventDefault() yang kamu pelajari sebelumnya memiliki tujuan berbeda.

Ini sangat penting.

17. stopPropagation() vs preventDefault()

Keduanya sering tertukar.

stopPropagation()

Misalnya:

event.stopPropagation();

Artinya:

“Jangan teruskan event ini ke parent.”

preventDefault()

Misalnya pada form:

event.preventDefault();

Artinya:

“Browser, jangan lakukan aksi default-nya.”

Contohnya:

Submit form
   ↓
browser biasanya reload/navigasi
   ↓
preventDefault()
   ↓
jangan lakukan submit default

18. Analogi Sederhana

Bayangkan:

BUTTON
  ↓
RUANG
  ↓
GEDUNG

Kamu berteriak:

“LOGIN!”

Suara itu bisa terdengar:

BUTTON
  ↓
RUANG
  ↓
GEDUNG

Ini seperti bubbling.

Sekarang kamu pasang peredam suara di button:

BUTTON
  ↓
🛑 STOP

Suara tidak sampai ke ruangan dan gedung.

Itulah:

event.stopPropagation();

19. Event Bubbling Bukan Berarti Event Selalu Hanya “Naik”

Untuk pemahaman dasar lecture, kita fokus pada bubbling:

child → parent

Tetapi secara teknis, sistem event DOM memiliki fase propagasi yang lebih lengkap:

Capture phase
      ↓
Target phase
      ↓
Bubble phase

Gambaran sederhananya:

document
   ↓
 header
   ↓
  div
   ↓
button
   ↑
  div
   ↑
 header
   ↑
document

Bagian turun:

capture phase

Bagian target:

target phase

Bagian naik:

bubble phase

Lecture ini sedang fokus pada bagian bubble phase.

Untuk sekarang, mental model:

event terjadi di child
        ↓
event naik ke parent
        ↓
event naik lagi
        ↓
event bubbling

sudah cukup.

20. addEventListener() dan Event Bubbling

Kita juga bisa melakukan hal yang sama menggunakan addEventListener().

Contoh:

const button = document.querySelector(".login-button");

button.addEventListener("click", function(event) {
    event.stopPropagation();

    alert("button clicked");
});

Misalnya struktur:

header
  └── div
       └── button

Jika header dan div juga punya click listener:

header.addEventListener("click", function() {
    console.log("header");
});

div.addEventListener("click", function() {
    console.log("div");
});

button.addEventListener("click", function(event) {
    event.stopPropagation();

    console.log("button");
});

Klik button:

button

Saja.

Karena:

event.stopPropagation();

menghentikan propagation.

21. Kalau Tidak Menggunakan stopPropagation()?

Misalnya:

button.addEventListener("click", function() {
    console.log("button");
});

div.addEventListener("click", function() {
    console.log("div");
});

header.addEventListener("click", function() {
    console.log("header");
});

Klik button:

button
div
header

Kenapa?

Karena:

click button
     ↓
button listener
     ↓
bubbling
     ↓
div listener
     ↓
bubbling
     ↓
header listener

22. Event Bubbling Bisa Terjadi Walaupun Parent Tidak Diklik Langsung

Ini adalah salah satu poin yang paling sering membuat pemula bingung.

Misalnya:

<div>
    <button>Login</button>
</div>

Kamu tidak mengklik div.

Kamu mengklik:

button

Tetapi div bisa menjalankan click handler.

Kenapa?

Karena:

button diklik
      ↓
click event
      ↓
bubble
      ↓
div

Jadi parent bisa menangani event yang berasal dari child.

23. Hubungkan dengan Konsep DOM Tree

Kamu sebelumnya sudah belajar bahwa browser mengubah HTML menjadi DOM tree.

Misalnya:

<header>
    <div>
        <button>Login</button>
    </div>
</header>

DOM tree:

Document
   │
   └── header
        │
        └── div
             │
             └── button

Karena DOM memiliki hubungan parent-child, event juga dapat dipropagasikan melalui hubungan tersebut.

Maka:

button
  ↑
div
  ↑
header
  ↑
document

Event bubbling memanfaatkan hierarchy tersebut.

24. Kenapa Event Bubbling Penting?

Ini bukan hanya pertanyaan interview.

Event bubbling sangat berguna dalam aplikasi nyata.

Salah satu konsep yang nanti akan kamu temui adalah:

Event Delegation

Misalnya kamu punya:

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Orange</li>
    <li>Mango</li>
</ul>

Daripada memberikan event listener ke setiap li, kita bisa memanfaatkan bubbling dan memasang listener pada ul.

Konsepnya:

click li
   ↓
event bubble
   ↓
ul
   ↓
ul handler

Ini membuat kode bisa lebih efisien dan fleksibel.

Catatan: event delegation biasanya akan lebih mudah dipahami setelah kamu benar-benar nyaman dengan bubbling.

25. event.target Akan Sangat Berkaitan dengan Ini

Ada satu konsep yang kemungkinan akan muncul di lecture berikutnya:

event.target

Ini penting karena saat event bubbling, kita harus bisa membedakan:

“Event ini sebenarnya dimulai dari elemen mana?”

Misalnya:

<div>
    <button>Login</button>
</div>

Kita klik button.

Walaupun listener berada di div, event bisa memiliki:

event.target

yang menunjuk ke:

button

Jadi ada konsep:

event.target
    ↓
elemen tempat event awal terjadi

Sedangkan nanti ada:

event.currentTarget

yang berkaitan dengan elemen tempat listener yang sedang dijalankan berada.

Ini penting untuk event delegation.

26. Bedakan target dan Parent

Misalnya:

<header>
    <div>
        <button>Login</button>
    </div>
</header>

Klik button.

Bisa dibayangkan:

event.target
      ↓
   button

Kemudian event bubbling:

button
  ↓
 div
  ↓
header

Kalau listener sedang dieksekusi pada div, nanti:

target        = button
currentTarget = div

Ini memang sedikit lebih advanced, tapi bagus untuk mulai mengenalnya.

27. Kenapa Lecture Menggunakan onclick?

Lecture menggunakan:

onclick="showClickAlert(event)"

Karena sebelumnya kamu sudah belajar inline event handler.

Tapi dalam project modern, biasanya kita lebih sering menggunakan:

element.addEventListener("click", handler);

Misalnya:

button.addEventListener("click", showClickAlert);

Kemudian:

function showClickAlert(event) {
    event.stopPropagation();

    alert("button clicked");
}

Ini lebih rapi karena HTML dan JavaScript tidak terlalu tercampur.

28. Kesalahan yang Harus Dihindari

❌ Salah 1: Mengira hanya elemen yang diklik yang bisa menjalankan handler

Salah:

“Saya klik button, berarti hanya button yang menerima event.”

Yang lebih tepat:

button
  ↓
event bubbling
  ↓
parent
  ↓
grandparent

❌ Salah 2: Mengira parent benar-benar diklik

Tidak.

Kalau kamu klik button:

button = actual clicked element

Parent hanya ikut menangani event karena bubbling.

❌ Salah 3: Menganggap stopPropagation() menghapus event

Tidak.

event.stopPropagation();

tidak menghapus click event.

Ia hanya menghentikan propagasi event.

❌ Salah 4: Mengira preventDefault() menghentikan bubbling

Tidak.

event.preventDefault();

dan:

event.stopPropagation();

memiliki tujuan berbeda.

29. Ringkasan Alur Lecture

Seluruh lecture bisa dirangkum menjadi:

HTML nested elements
        ↓
header
  ↓
div
  ↓
button
        ↓
user klik button
        ↓
click event terjadi
        ↓
button handler
        ↓
event bubbling
        ↓
div handler
        ↓
event bubbling
        ↓
header handler

Itulah:

Event Bubbling

30. Kalau Ingin Menghentikannya

Gunakan:

event.stopPropagation();

Sehingga:

user klik button
       ↓
button handler
       ↓
stopPropagation()
       ↓
       🛑
       ↓
tidak ke div
       ↓
tidak ke header

31. Cheat Sheet

32. Yang Paling Penting untuk Diingat

Kalau besok kamu ditanya interview:

“What is event bubbling in JavaScript?”

Jawaban sederhananya:

Event bubbling adalah mekanisme propagasi event di DOM di mana event yang terjadi pada elemen child dapat diteruskan ke parent elements di atasnya, sehingga event handler pada parent juga dapat dijalankan.

Contoh:

header
  ↓
 div
  ↓
button ← click
  ↑
  │ bubbling
 div
  ↑
  │ bubbling
header

Untuk menghentikannya:

event.stopPropagation();

🧠 Mental model terakhir

Ingat kalimat ini:

“Klik terjadi di bawah, event bisa naik ke atas.”

       HEADER
          ↑
       bubbling
          ↑
         DIV
          ↑
       bubbling
          ↑
       BUTTON
          ↑
       CLICK!

Dan kalau kamu ingin mengatakan:

“Cukup sampai sini, jangan naik lagi.”

gunakan:

event.stopPropagation();

BUTTON
  ↑
CLICK
  ↓
stopPropagation()
  ↓
🛑 STOP

Inti lecture: event bubbling menjelaskan kenapa satu click pada child bisa menyebabkan handler pada parent ikut berjalan, dan stopPropagation() digunakan ketika kita ingin menghentikan penyebaran event tersebut.