Універсальнае дэлегаванне падзей у JavaScript

Прыведзены ў папярэднім ўроке код працоўны, аднак, не без недахопаў. Давайце разбярэм гэтыя недахопы і напiшам больш універсальнае рашэнне.

Недахоп нашага коду праявіцца ў тым выпадку, калі ўнутры li будуць якіясьці ўкладзеныя тэгі. У нашым выпадку хай гэта будуць тэгі 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 + '!';
	}
});

Паўтарыце прыведзенае рашэнне.