Delegasi Peristiwa dalam JavaScript

Dalam pelajaran sebelumnya, masalah yang timbul apabila menambah elemen baru telah diterangkan, dan penyelesaiannya diberikan. Dalam pelajaran ini, kita akan melihat cara yang lebih baik untuk mengelakkan masalah - delegasi peristiwa. Mari kita telitinya.

Seperti yang anda sudah tahu, dengan mengklik pada li, kita secara serentak juga mengklik pada ul. Ini bermungkinan disebabkan oleh pembublan peristiwa. Kita boleh menggunakan ini untuk menyelesaikan tugas kita: letakkan peristiwa bukan pada setiap li, tetapi pada induk mereka ul:

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

Sekarang dalam pengendali peristiwa, this akan merujuk kepada elemen yang pengendali itu dipautkan, manakala event.target - kepada elemen di mana peristiwa berlaku:

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

Mari kita buat agar li yang diklik, menambah tanda seru pada akhir teksnya:

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

Ulangi penyelesaian yang diberikan. Pastikan bahawa li baru juga akan bertindak balas kepada klik.