Delegarea universală a evenimentelor în JavaScript

Codul prezentat în lecția anterioară este funcțional, cu toate acestea, nu este lipsit de deficiențe. Să analizăm aceste deficiențe și să scriem o soluție mai universală.

Dezavantajul codului nostru va apărea în cazul în care în interiorul li vor fi niște tag-uri imbricate. În cazul nostru, să fie tag-urile i:

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

În acest caz, click-ul pe tag-ul i va duce la adăugarea semnului exclamării la sfârșitul tag-ului i, și nu a tag-ului li, așa cum am dori - la urma urmei, în event.target ajunge exact acel tag în care a avut loc evenimentul.

Problema poate fi rezolvată cu ajutorul metodei closest:

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

Repetați soluția prezentată.