Download Source Code Aplikasi

Event Bubbling

Tuesday, September 3rd, 2019 - Artikel HTML DOM

Terminologi bubbles up atau propagates up ialah proses di mana suatu event dimungkinkan untuk menggelembung dan merambat ke atas hingga menjangkau DOM hierarchy teratas atau hingga bubbling action itu dibatalkan.

Untuk menghentikan suatu event yang sanggup bubbles up, gunakan properti cancelBubble atau metode stopPropagation().

Sebagai rujukan ilustrasi bubbles up dari ONCLICK dalam elemen BUTTON:

  1. Ketika user mengklik BUTTON, pertama-tama ONCLICK di kirim kepada BUTTON itu sendiri.
  2. Setelah itu ONCLICK di kirim kepada Parent element dari BUTTON itu.
  3. Setelah itu ONCLICK di kirim lagi kepada Parent element dari Parent element-nya BUTTON, dst.

Sebagai contoh:

<html> <body name=”BODY” onclick=”alert(‘BODY’)”> <div name=”DIV” onclick=”alert(‘DIV’)”> <button name=”Y” onclick=”alert(‘Y’)”>Y</button><br> <button name=”X” onclick=”alert(‘X’)”>X</button> </div> </body> </html>

Cara kerja dari bubbles up untuk ONCLICK dalam DOM hierarchy di atas adalah:

Ketika user mengklik tombol ‘X’:

  1. Pertama-tama ONCLICK di kirim kepada tombol ‘X’.
  2. Setelah itu, ONCLICK di kirim kepada Parent element dari tombol ‘X’, yaitu DIV.
  3. Setelah itu, ONCLICK di kirim lagi kepada Parent element dari Parent element tombol ‘X’, yaitu BODY.

Ketika user mengklik tombol ‘Y’:

  1. Pertama-tama ONCLICK di kirim kepada tombol ‘Y’.
  2. Setelah itu, ONCLICK di kirim kepada Parent element dari tombol ‘Y’, yaitu DIV.
  3. Setelah itu, ONCLICK di kirim lagi kepada Parent element dari Parent element tombol ‘Y’, yaitu BODY.

Ketika user mengklik DIV:

  1. Pertama-tama ONCLICK di kirim kepada elemen DIV.
  2. Setelah itu, ONCLICK di kirim kepada Parent element dari elemen DIV, yaitu BODY.

Ketika user mengklik BODY:

  1. Pertama dan terakhir ONCLICK di kirim kepada elemen BODY.

Contoh lainnya, dikala sebuah event ialah bubbles up, dan ada perkara di mana event handler diregister di dalam Parent elemen dari si-child, dan dikala si-child anda klik, maka event handler yang diregister di dalam Parent elemennya si-child akan dipanggil, ibarat berikut:

<div name="DIV" onclick="alert(‘DIV’)"> <button name="X">X</button> </div>

Coba klik tombol, maka event handler dari elemen DIV yang akan dipanggil.

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.
Download Source Code Aplikasi
Event Bubbling | Ahmad Code | 4.5