Universaalne sündmuste delegeerimine JavaScriptis

Eelmises õppetükis toodud kood on töötav, kuid mitte ilma puudusteta. Vaatame need puudused lähemalt ja kirjutame universaalsema lahenduse.

Meie koodi puudus ilmneb juhul, kui li sees on mõningaid pesastatud tage. Meie puhul olgu need i tagid:

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>

Sel juhul viib i tagile vajutamine hüüumärgi lisamiseni tagi lõppu i, mitte li tagile, nagu me sooviksime - sest event.target sisaldab just seda tagi, kus sündmus toimus.

Probleemi saab lahendada meetodi closest abil:

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