უნივერსალური დელეგირება (delegation) JavaScript-ში

წინა გაკვეთილში მოყვანილი კოდი მუშაობს, თუმცა, არა ნაკლოვანებების გარეშე. მოდით განვიხილოთ ეს ნაკლოვანებები და დავწეროთ უფრო უნივერსალური გადაწყვეტა.

ჩვენი კოდის ნაკლი გამოიხატება იმ შემთხვევაში, როდესაც 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 + '!';
	}
});

გაიმეორეთ მოყვანილი გადაწყვეტა.