JavaScript-də Universal Hadisə Delegasiyası

Əvvəlki dərsdə verilmiş kod işləkdir, lakin, çatışmazlıqları yox deyil. Gəlin bu çatışmazlıqları araşdıraq və daha universal həll yazaq.

Kodumuzun çatışmazlığı o zaman özünü göstərəcək ki, li-nin daxilində bəzi daxili teqlər olsun. Bizim vəziyyətimizdə bunlar i teqləri olsun:

<ul>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
	<li>item <i>italic</i> item</li>
</ul>

Bu halda i teqinə klikləmək i teqinin sonunda nida işarəsi əlavə edilməsi ilə nəticələnəcək, li teqinin sonunda deyil, istədiyimiz kimi - çünki event.target hadisənin baş verdiyi dəqiq teq olur.

Problem closest metodu ilə həll edilə bilər:

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

Göstərilən həlli təkrarlayın.