Универзално делегирање на настани во JavaScript

Кодот претставен во претходната лекција е функционален, сепак, не е без недостатоци. Ајде да ги разгледаме овие недостатоци и да напишеме поуниверзално решение.

Недостатокот на нашиот код ќе се maniфестира во случајот, кога во внатрешноста на li има вгнездени тагови. Во нашиот случај нека тоа бидат таговите 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>

Во овој случај, кликнување на тагот i ќе доведе до додавање на извичник на крајот на тагот i, а не на тагот li, како што ние би сакале - бидејќи во event.target пропаѓа токму оној таг во кој се случил настанот.

Проблемот може да се реши со помош на методот closest:

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