JavaScriptда универсал событие делегацияси

Олдинги дарсда келтирилган код ишлайди, аммо, камчиликсиз эмас. Келгингиз, шу камчиликларни кўриб чиқамиз ва янда универсал ечим язайлик.

Бизнинг кодимизнинг камчилиги 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 тегининг охирига эмас, худди биз xohlagandek - чунки event.target аynан шу тегга тушади, унда событие юз берди.

Муаммони closest усули ёрдамида ҳал қилиш мумкин:

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