Categories: Artikel HTML DOM

Event Bubbling

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” >

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" >

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.
Ahmad Code

Share
Published by
Ahmad Code

Recent Posts

Source Code Aplikasi untuk mengelola kasbon karyawan berbasis php

Download Source Code Aplikasi untuk mengelola kasbon karyawan berbasis php. Program ini dibuat menggunakan bahasa…

3 hours ago

Source Code Sistem Informasi Geografis Berbasis Php

Pada postingan kali ini, sourcecodeaplikasi.info kembali mencoba untuk membagikan ke sobat semua tentang sebuah aplikasi…

9 hours ago

Source Code Aplikasi Penjualan Barang Toko Bangunan Berbasis Web

Download Source code Aplikasi Penjualan Barang Berbasis Web Gratis. Aplikasi ini dibangun menggunakan bahasa pemrograman…

15 hours ago

Source Code Aplikasi Sistem Informasi Perpsustakaan Berbasis Web

Source Code Aplikasi Sistem Informasi Perpsustakaan Berbasis Web yang akan admin share pada kesempatan kali…

21 hours ago

Source Code Aplikasi Pendataan Pendapatan Warga Berbasis Web

Source Code Aplikasi Pendataan Pendapatan Warga Berbasis Web yang akan kami bagikan di kesempatan ini…

1 day ago

Source Code Aplikasi Absensi Online Berbasis Php

Source code aplikasi absensi berbasis web. Aplikasi absensi online ini dibuat dengan menggunakan bahasa pemrograman…

1 day ago