Univerzalno delegiranje dogodkov v JavaScript

Koda iz prejšnje lekcije je delujoča, vendar ni brez pomanjkljivosti. Razpravljajmo o teh pomanjkljivostih in napišimo bolj univerzalno rešitev.

Pomanjkljivost naše kode se bo pokazala v primeru, ko bodo znotraj li nekateri gnezdeni oznake. V našem primeru naj bodo to oznake 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>

V tem primeru bo klik na oznako i povzročil dodajanje klicaja na konec oznake i, in ne oznake li, kot bi želeli - saj v event.target pade ravno tista oznaka, v kateri se je zgodil dogodek.

Težavo je mogoče rešiti z metodo closest:

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