Terminologi bubbles up atau propagates up adalah proses di mana suatu event dimungkinkan untuk menggelembung dan merambat ke atas sampai menjangkau DOM hierarchy teratas atau sampai bubbling action itu dibatalkan.
Untuk menghentikan suatu event yang dapat bubbles up, gunakan properti cancelBubble atau metode stopPropagation().
Sebagai contoh ilustrasi bubbles up dari ONCLICK dalam elemen BUTTON:
- Ketika user mengklik BUTTON, pertama-tama ONCLICK di kirim kepada BUTTON itu sendiri.
- Setelah itu ONCLICK di kirim kepada Parent element dari BUTTON itu.
- Setelah itu ONCLICK di kirim lagi kepada Parent element dari Parent element-nya BUTTON, dst.
Sebagai contoh:
Cara kerja dari bubbles up untuk ONCLICK dalam DOM hierarchy di atas adalah:
Ketika user mengklik tombol 'X':
- Pertama-tama ONCLICK di kirim kepada tombol 'X'.
- Setelah itu, ONCLICK di kirim kepada Parent element dari tombol 'X', yaitu DIV.
- Setelah itu, ONCLICK di kirim lagi kepada Parent element dari Parent element tombol 'X', yaitu BODY.
Ketika user mengklik tombol 'Y':
- Pertama-tama ONCLICK di kirim kepada tombol 'Y'.
- Setelah itu, ONCLICK di kirim kepada Parent element dari tombol 'Y', yaitu DIV.
- Setelah itu, ONCLICK di kirim lagi kepada Parent element dari Parent element tombol 'Y', yaitu BODY.
Ketika user mengklik DIV:
- Pertama-tama ONCLICK di kirim kepada elemen DIV.
- Setelah itu, ONCLICK di kirim kepada Parent element dari elemen DIV, yaitu BODY.
Ketika user mengklik BODY:
- Pertama dan terakhir ONCLICK di kirim kepada elemen BODY.
Contoh lainnya, ketika sebuah event adalah bubbles up, dan ada kasus di mana event handler diregister di dalam Parent elemen dari si-child, dan ketika si-child anda klik, maka event handler yang diregister di dalam Parent elemennya si-child akan dipanggil, seperti berikut:
Coba klik tombol, maka event handler dari elemen DIV yang akan dipanggil.
