Univerzális eseménydelegálás JavaScriptben

Az előző leckében bemutatott kód működőképes, azonban nem mentes a hibáktól. Elemezzük ezeket a hiányosságokat és írjunk univerzálisabb megoldást.

A kódunk hátránya akkor jelentkezik, amikor a li elemen belül vannak beágyazott címkék. Esetünkben legyenek ezek i címkék:

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

Ebben az esetben a i címkére kattintva a felkiáltó jel a címke végére kerül a i elemben, nem pedig a li elemben, ahogy szeretnénk - hiszen a event.target pontosan azt az elemet tartalmazza, ahol az esemény bekövetkezett.

A probléma megoldható a closest metódus segítségével:

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

Ismételje meg a bemutatott megoldást.