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:

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

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