Event bubble dan event delegation pada Javascript

Pembahasan mengenai Javascript saat ini sampai kepada event bubble dan event delegation pada Javascript. Seperti kita mengerti bubble sebagai gelembung maka kita juga akan memahami bahwa event Javascript ini akan menggelembung mulai dari children, kemudian diteruskan kepada parent, kemudian diteruskan kepada parentnya parent demikian seterusnya.

Sebagai contoh jika ada tag ‘div-ul-li’ maka jika kita mengclick li maka li akan menerima event, ul akan menerima event dan div juga akan menerima event click ini. Sedangkan pengertian event delegation mendelegasian penanganan event suatu element kepada event lainnya. Di sini kita akan mendelegasikan penanganan event dari suatu element kepada parentnya. Mengapa ini bisa terjadi ? Kita akan jelaskan pada contoh di bawah ini.

Perhatikan source core html di bawah ini:

<ul id=”makan_siang”> Menu Sehat:
<li id=”menu1″ class=”menu”>Nasi <button id=”1″>Hapus</button></li>
<li id=”menu2″ class=”menu”>Ayam <button id=”2″>Hapus</button></li>
<li id=”menu3″ class=”menu”>Daging <button id=”3″>Hapus</button></li>
<li id=”menu4″ class=”menu”>Soda Dingin <button id=”4″>Hapus</button></li>
<li id=”menu5″ class=”menu”>Air Putih <button id=”5″>Hapus</button></li>
</ul>

Bagaimana kita akan menangani button hapus ? Kita mungkin menjawab dengan document.querySelector(‘.menu’), tapi ingatlah bahwa document.querySelector(‘.menu’) hanya menangani elemen pertama yang didapatkan. Atau kita mungkin mau menggunakan querySelectorAll, ya itu bisa dilakukan tetapi cukup panjang juga. Atau kita bisa juga membuat event listener tiap li, tetapi itu akan panjang juga.

Nah Javascipt memiliki solusi untuk menangani hal ini dengan event delegation. Contoh penanganan untuk kasus kita kali ini adalah seperti berikut ini:

	document.querySelector('#makan_siang').addEventListener('click',function(e)
	{		
		menuku = document.querySelector('#menu' + e.target.id);
		document.querySelector('#makan_siang').removeChild(menuku);	
	});

Untuk melihat demo dari pembelajaran kali ini silahkan klik  https://js.aris.proweb.asia/3-11-1-event-bubble-delegation.html dan akan menghasilkan tampilan:

Saat kita klik Hapus pada Soda Dingin maka tampilan akan menjadi sepeti berikut ini:

Kunjungi www.proweb.co.id untuk menambah wawasan anda.