Իվենթների ունիվերսալ դելեգացումը JavaScript-ում

Նախորդ դասում բերված կոդը աշխատող է, սակայն, առանց թերությունների չէ։ Եկեք վերլուծենք այդ թերությունները եւ գրենք ավելի ունիվերսալ լուծում։

Մեր կոդի թերությունը կբացահայտվի այն դեպքում, երբ li-ի ներսում լինեն որոշ nested տեգեր։ Մեր դեպքում թող դրանք լինեն 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>

Այս դեպքում i տեգի վրա կլիկ անելը կհանգեցնի բացականչական նշանի ավելացմանը տեգի վերջում i, եւ ոչ թե li տեգում, ինչպես մենք կցանկանայինք, քանի որ event.target-ում հայտնվում է հենց այն տեգը, որում իվենթը տեղի ունեցավ։

Խնդիրը կարելի է լուծել closest մեթոդի միջոցով։

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

Կրկնեք բերված լուծումը։