Delegasi Peristiwa di JavaScript

Dalam pelajaran sebelumnya, masalah yang timbul saat menambahkan elemen baru telah dijelaskan, dan solusinya diberikan. Dalam pelajaran ini, kita akan mempertimbangkan cara yang lebih baik untuk mengatasi masalah tersebut - delegasi peristiwa. Mari kita bahas.

Seperti yang sudah Anda ketahui, dengan mengklik li, kita secara bersamaan juga mengklik ul. Hal ini dimungkinkan berkat gelembung peristiwa (event bubbling). Kita dapat menggunakan ini untuk menyelesaikan tugas kita: pasang peristiwa bukan pada setiap li, tetapi pada induknya ul:

list.addEventListener('click', function() {
	
});

Sekarang dalam penangan peristiwa, this akan menunjuk ke elemen tempat penangan dipasang, dan event.target - ke elemen tempat peristiwa terjadi:

list.addEventListener('click', function(event) {
	console.log(this);         // daftar kita
	console.log(event.target); // item daftar
});

Mari kita buat agar li yang diklik menambahkan tanda seru di akhir:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Ulangi solusi yang diberikan. Pastikan bahwa li baru juga akan merespons klik.